【2】浅析Vue组件
组件的基本概念
Vue中有一个概念叫做组件化，就是把页面分成一个个小的部分，每个部分有自己的功能，且可以复用。最外层的组件即根组件，除此之外会有很多子组件。子组件分为两种，全局组件和局部组件：
全局组件，用 Vue.component(组件名，{}) 这种方法创建，在根组件接管范围内可以用组件名当标签名的方式直接使用。
Vue.component('item',{
props:[],
template: "{
{x}}
",
data:function(){
return{
x:"hello"
}
},
methods:{
func:function(){}
}
})
子组件与根组件不同的几个点在于：
- 有一个props用于接收父组件传来的值
- 有一个template，其值是定义的HTML模板，在使用组件时显示的就是这个模板
- 子组件的data是一个函数，其中返回一个对象，在这个对象中定义数据
- 局部组件的创建直接用对象形式，必须要在根实例的components中注册才能使用，其他方面和全局组件相同
is属性
因为在某些标签内，只允许出现特定的标签（如ul标签内只有li标签是有效的），因此使用子组件的模板时可能会引起解析错误，这时就要给标签添加is属性来解决这个问题：
<li is="item">li>
使用is属性有两种方法，将子组件在components中注册后，用is="组件名"的方法；或是将子组件在data中注册，再用 :is="变量名"的方法使用。
通过后一种绑定方式，我们可以实现动态组件。即，将变量指向不同的组件，页面的内容也就跟着改变了。
给模板添加引用
通过传统的getElementById的方法不方便拿到子组件对应的节点，因此在组件的模板中，可以给标签加上一个ref属性ref=“引用名”，然后通过this.$refs.引用名就可以拿到这个DOM节点。这个方法对于普通标签同样适用。
v-once指令
组件第一次创建时会存入内存中，当再次调用该组件时不会重新创建组件，而是直接从内存中取。在标签中直接添加v-once即可，不需赋值
插槽
- 使用场景：在定义模板时，其中某一部分的具体内容还未确定，在使用子组件时再传入这一部分内容。
- 使用方法：在相应的位置用表示插槽占位，在使用模板时在模板内部传入内容，就会渲染到slot的位置。若模板中没有slot标签，使用子组件时，开始标签和结束标签间的内容将会被抛弃。
- 默认值：在slot标签内部可以提供html代码作为默认值，若在使用模板时没有传入内容，则显示默认值
- 具名插槽：当模板中出现了多个插槽时使用，在模板中给slot标签添加属性name=“slotName”。使用模板时，将传给插槽的内容包裹在template标签中，并为其添加属性v-slot:slotName
- 作用域插槽：让插槽内容能够访问子组件中才有的数据。模板向插槽中传入数据，但DOM结构在调用时决定。调用组件时向插槽传入的内容必须在外层包裹一个template标签，且该标签有一个slot-scope属性，其值接收模板传递来数据（接收到的是一个对象，用属性名获取到传来的值）
传递给模板的数据用v-bind绑定至一个新的变量。
<body>
<div id='box'>
<it>
<template slot-scope="props">
<h1>{
{props.con}}h1>
template>
it>
div>
<script>
Vue.component('it',{
data:function(){
return{
text:['aa','bb']
}
},
template:`
组件间的传值
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()方法接收传递来的事件（这部分代码可放在生命周期函数中）