组件在实际项目中的使用

组件在实际项目中的使用
自动封装组件
封装组件后组件间传值
父传子props
子传父$emit
组件事件的调用
在父组件内
组件标签添加ref=‘自定义名’
this.$refs.自定义组件名.子组件方法
组件插槽-套入数据或分开布局
slot的使用就像它的名字一样, 在组件内定义一块空间, 取名为slotA
<div class="dialog">
我是对话框
<slot name="slotA"></slot>
</div>

在组件外, 我们可以往插槽里填入任何元素, dialog-a为组件的名称
<dialog-a :options="hello">
<template slot="slotA">
<button>按钮</button>
// ... 可以是任何元素
</template>
</dialog-a>

插槽作用域-外部获取组件内部数据
slot-scope的作用就是把组件内的数据带出来
<div class="dialog">
我是对话框<br>
{{message}}
<slot name="slotA" :message="message"></slot>
</div>

在组件外就可以得到其中的message
<dialog-a :options="hello">
<template slot="slotA" slot-scope="scope">
<button>{{scope.message}}</button>
</template>
</dialog-a>

实际项目代码实例（多个自定义数据）
子组件
<template>
<div class="collapbox">
<a-collapse v-model="currentKey">
<a-collapse-panel key="1" header="This is panel header 1">
<slot name='slotA' :slotAdata="currentKey">
1
</slot>
</a-collapse-panel>
<a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
<slot name='slotB'>
2
</slot>
</a-collapse-panel>
<a-collapse-panel key="3" header="This is panel header 3">
<slot name='slotC' :text='text' :index="currentKey">
</slot>
</a-collapse-panel>
</a-collapse>
</div>
</template>
data(){
return {
text:'这是组件自身的数据text',
currentKey:this.activeKey
}
},
父组件
import collaps from '../../components/collapbox/index.vue'
<collaps ref='collaps' :activeKey="activekey">
<template slot="slotA" slot-scope = 'collapsSlot'>
collapsSlot:{{collapsSlot}}
</template>
<template slot="slotC" slot-scope = 'collapsSlot'>
collapsSlot:{{collapsSlot}}
</template>
<template slot="slotC" slot-scope = 'collapsSlot'>
collapsSlot:{{collapsSlot}}
</template>
</collaps>
分别输出的是
collapsSlot:{ "text": "这是组件自身的数据text", "index": [ "1", "3" ] }
collapsSlot:{ "slotAdata": [ "1", "3" ] }
步骤总结
1：先在子组件内添加slot
<slot name='slotA' >
</slot>
<slot name='slotB'>
</slot>
2：在想要获取的插槽添加自定义表填并绑定想要传给使用组件（父组件）子组件数据
<slot name='slotA' :slotAdata="currentKey">
</slot>
此时使用name=slotA的组件插槽的template就可以获得子组件currentKey数据
3：在父组件内对应slot="子组件定义的名字"添加slot-scope=“自定义属性名”
<template slot="slotA" slot-scope = 'collapsSlot'>
collapsSlot:{{collapsSlot}}
</template>
4：使用自定义的属性名即可获取相应的数据
获得的数据是个对象里面包含所有定义在slotA内自定义的数据
比如 ：
子组件定义：<slot name='slotA' :slotAdata="currentKey" :slotADate2="text">
</slot>
父组件获取：<template slot="slotA" slot-scope = 'collapsSlot'>
collapsSlot:{{collapsSlot}}
</template>
页面就会打印：collapsSlot:{ "slotAdata": [ "2", "1" ], "slotADate2": "这是组件自身的数据text" }
5：扩展(在vue-ant框架内的a-table组件内处理多阶层复杂表格数据时经常会用到)
通过事件获取的数据：
子组件：<slot name='slotA' :slotAdata="currentKey" :slotADate2="text">
父组件：<template slot="slotA" slot-scope = 'collapsSlot'>
<a-button @click="fntest(collapsSlot)">test</a-button>
collapsSlot:{{collapsSlot}}
</template>
父组件:fntest(e){
console.log(e)
}
会获取到slot暴露出去的date，键是自定义的字符串
slotADate2: "这是组件自身的数据text"
slotAdata: (2) ["2", "1", ]
子组件定义slot时添加的数据是在使用slot时无数据时显示（有数据不显示暂无数据）
<slot name='slotA' :slotAdata="currentKey" :slotADate2="text">
暂无数据
</slot>