第4章 深入理解Vue组件

4-1 使用组件细节点

1.is的使用
当我们写循环组件的时候，经常给
table中的tr
select中的option
ul中的li或者ol中的li
等等定义组件的时候，我们经常用is来定义组件的名称，为了让浏览器成功的渲染正确的dom结构

2.在子组件定义data的时候，必须是一个函数，而不能是一个对象，返回一个对象是为了每个子组件都能拥有一个独立的数据存储。这样子组件之间的数据不会互相影响
而在根组件中，data可以是一个对象。

3.有时候我们在开发过程中，因为一些业务的需求，少不了对dom的操作，那么我们就可以借助ref来实现

//实例一

    
hello world




//案例二 counter求和

    
    
    
{{total}}

4-2父子组件之间的数据传递

父组件向子组件传值：是通过属性的方式
子组件向父组件传值：可以通过$emit来触发一个事件

vue数据传递遵循的是单向数据流，
所以在下面的案例中我们并没有对content数据直接进行数据的累加，而是把content数据赋值给了number，对number进行数据的累加操作。

    
    
    
{{total}}

4-3组件参数校验和非props特性

1.组件的的参数校验

2.props特性和非props特性的对比
props特性：
父组件传递属性，子组件要接受该属性
props属性不会显示在dom的标签之中
非props特性：
父组件传递属性，子组件没有去接受，而是直接调用
props属性会显示在dom的标签之中

4-4给组件绑定原生事件

通过.native属性来绑定原生事件

4-5 非父子组件间的传值

非父子组件间的传值

1.通过vuex
2.通过发布订阅模式（Bus/总线/发布订阅模式/观察者模式/）

4-7作用域插槽

父组件调用子组件的时候，给子组件传了一个插槽，这个插槽是一个作用域的插槽，这个插槽必须是一个
那什么时候使用作用插槽呢？
1.当子组件做循环
2.或者当子组件的dom结构由外部传递进来，或者有外部决定的时候

4-8 动态组件和v-once 指令

     
    
    
    change
  
  

更多

上一篇：第3章 Vue 基础精讲
下一篇：第5章 Vue 表单
全篇文章：Vue学习总结
所有章节目录：Vue学习目录