Vue组件化补充
1、父子组件访问方式
父访问子$children $refs
//在父组件中
methods:{
//使用$children 访问
array(){
//返回第一个子组件
return this.$children\[0\]
//因为父组件可能有很多子组件，所以返回的是数组，并且访问只能通过下标，不方便
}，
//使用$refs访问，使用name访问指定子组件
object(){
//访问cpn子组件并且名字为aaa <cpn ref="aaa">
return this.$refs.aaa
}
}
子访问父 $parent
//子组件中
methods:{
getParentCpn(){
return this.$parent
//只访问当前子组件的上层父组件
}，
getRootCpn(){
return this.$root
//只访问当前子组件的根组件
}
}
2、插槽
基本使用：
<!--设置模板-->
<template id="cpn">
<div>
<slot></slot>
<input type="text" value="这是第一个插件">
</div>
</template >
<!--slot相当于一个占位，当使用cpn组件时，在此位置上添加一个button标签-->
<!--使用-->
<div id="app">
<cpn><button></cpn>
</div>
<!--相当于在slot位置添加了一个button标签-->
<!--显示为
<div id="app">
<button>
<input type="text" value="这是第一个插件">
</div>
-->
<!--可以设置默认模板-->
<template id="cpn">
<div>
<slot><p>当使用的时候不在cpn里面添加标签则显示此P</p></slot>
<input type="text" value="这是第一个插件">
</div>
</template >
<!--使用-->
<div id="app">
<cpn></cpn>
</div>
<!--显示为
<div id="app">
<p>当使用的时候不在cpn里面添加标签则显示此P</p>
<input type="text" value="这是第一个插件">
</div>
-->
<!--注意，当使用插件的时候，不指定插件，则会重复使用slot-->
使用指定slot,具名插槽
<!--设置模板-->
<template id="cpn">
<div>
<slot name="center"></slot>
<input type="text" value="这是第一个插件">
<slot name="bottom"></slot>
</div>
</template >
<!--使用-->
<div id="app">
<cpn>
<span slot="bottom"> 这是名为bottom的slot</span>
<span slot="center"> 这是名为center的slot</span>
</cpn>
</div>
<!--显示为
这是名为center的slot
这是第一个插件
这是名为bottom的slot
-->
3、编译作用域
父组件在自己的区域使用属于自己的属性
子组件在自己的区域使用属于自己的属性
<div id="app">
<!--onClick一定是在父组件中的方法-->
<span @click="onClick">
</div>
4、作用域插槽
父组件替换插槽标签，但是内容由子组件提供，就是身上绑定了数据data的slote。
//定义插槽的时候，把子组件的数据定义好，在父组件使用子组件的时候，把数据传给子组件的插槽
<!--设置模板-->
<template id="cpn">
<div>
<slot :data="childrenData"></slot>
</div>
</template >
<!--使用，在vue2.5以下使用作用域插槽一定要用template标签
2.5以上可以自定义标签，v2.6新增v-slot替代老方法, 就是在template标签上用v-slot:插槽名来绑定具名插槽。
-->
<div id="app">
<cpn>
<template slot-scope="aaa">
<!--aaa是自定义的，在此template标签使用，data也是自定义的，在子组件的slot ：后定义-->
<span>{{aaa.data}}</span>
</template>
</cpn>
</div>
<!--使用高版本-->
<div id="app">
<cpn>
<div v-slot="aaa">
<!--aaa是自定义的，在此template标签使用，data也是自定义的，在子组件的slot ：后定义-->
<span>{{aaa.data}}</span>
</div >
</cpn>
</div>