uniapp 子组件 props拿不到数据_【2】浅析Vue组件

组件的基本概念

Vue中有一个概念叫做组件化，就是把页面分成一个个小的部分，每个部分有自己的功能，且可以复用。最外层的组件即根组件，除此之外会有很多子组件。子组件分为两种，全局组件和局部组件：

全局组件，用 Vue.component(组件名，{}) 这种方法创建，在根组件接管范围内可以用组件名当标签名的方式直接使用。

Vue

子组件与根组件不同的几个点在于：

• 有一个props用于接收父组件传来的值
• 有一个template，其值是定义的HTML模板，在使用组件时显示的就是这个模板
• 子组件的data是一个函数，其中返回一个对象，在这个对象中定义数据

局部组件的创建直接用对象形式，必须要在根实例的components中注册才能使用，其他方面和全局组件相同

is属性

因为在某些标签内，只允许出现特定的标签（如ul标签内只有li标签是有效的），因此使用子组件的模板时可能会引起解析错误，这时就要给标签添加is属性来解决这个问题：

<

使用is属性有两种方法，将子组件在components中注册后，用is="组件名"的方法；或是将子组件在data中注册，再用 :is="变量名"的方法使用。

通过后一种绑定方式，我们可以实现动态组件。即，将变量指向不同的组件，页面的内容也就跟着改变了。

给模板添加引用

通过传统的getElementById的方法不方便拿到子组件对应的节点，因此在组件的模板中，可以给标签加上一个ref属性ref="引用名"，然后通过this.$refs.引用名就可以拿到这个DOM节点。这个方法对于普通标签同样适用。

v-once指令

组件第一次创建时会存入内存中，当再次调用该组件时不会重新创建组件，而是直接从内存中取。在标签中直接添加v-once即可，不需赋值

插槽

• 使用场景：在定义模板时，其中某一部分的具体内容还未确定，在使用子组件时再传入这一部分内容。
• 使用方法：在相应的位置用<slot></slot>表示插槽占位，在使用模板时在模板内部传入内容，就会渲染到slot的位置。若模板中没有slot标签，使用子组件时，开始标签和结束标签间的内容将会被抛弃。
• 默认值：在slot标签内部可以提供html代码作为默认值，若在使用模板时没有传入内容，则显示默认值
• 具名插槽：当模板中出现了多个插槽时使用，在模板中给slot标签添加属性name="slotName"。使用模板时，将传给插槽的内容包裹在template标签中，并为其添加属性v-slot:slotName
• 作用域插槽：让插槽内容能够访问子组件中才有的数据。模板向插槽中传入数据，但DOM结构在调用时决定
  • 调用组件时向插槽传入的内容必须在外层包裹一个template标签，且该标签有一个slot-scope属性，其值接收模板传递来数据（接收到的是一个对象，用属性名获取到传来的值）
  • 传递给模板的数据用v-bind绑定至一个新的变量。

<

组件间的传值

1. 父组件=>子组件

前面讲指令时已经说到过，v-bind指令可以用来接收父组件传给子组件的值，如要将父组件数组的值都存入子组件数组：

<p v-for="item in list" v-bind:content="item"></p>

再在子组件的props中定义content即可。

单向数据流：父组件传给子组件的值，不能在子组件中修改。如果确实需要修改，则在子组件中定义一个变量接收这个值，并在后续过程中修改这个变量。

参数校验：在子组件中对父组件传来的值进行约束，此时将子组件的props写为对象而不是数组，对象的每个键表示接收的数据，值有几种写法：

• 可以直接写为规定的类型（如String），注意不需要加引号
• 可以写成数组形式，表示值可以是里面任意一种类型
• 可以写成对象模式

type：规定的接收类型

required：是否必须。值为true表示必须传入这个值

default：没有传入这个值时该变量的默认值

validator：通过一个函数判断传入值是否符合要求

2. 子组件=>父组件

通过$emit("自定义事件名"，参数)的方式向外触发事件，在父组件中添加响应函数，可使用子组件传递出的参数

监听自定义时间的方法：在子组件标签上用@事件名 或.$on(事件名，响应函数)的方法进行事件监听

3. 非父子组件传值

非父子组件的传值，使用发布订阅模式，也叫总线模式。即将要传递的值挂载到总线上，其他任何要接收这个值的地方都可以通过总线获取这个值

• 创建bus属性： Vue.prototype.bus=new Vue()
• 需要传值时，在组件时间触发的函数中用this.bus.$emit('自定义事件名',参数)向外方法触发自定义事件，需要传递的数据可以作为参数
• 在需要接收的地方，用this.bus.$on()方法接收传递来的事件（这部分代码可放在生命周期函数中）