作用域
查官方文档插槽 Slots | Vue.js (vuejs.org)
子组件格式:
<slot name='插槽名称name' :属性名1="方法/对象" :属性名2="方法/对象"></slot>
注：属性可以传多个
<!-- 子组件：ChildComponent.vue -->
<template>
<div>
<slot :myMethod="childMethod"></slot>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
console.log('Child method executed');
}
}
}
</script>
父组件格式:
<template #插槽名="{ 属性1， 属性2 }">
注：属性可以接受多个，属性也可以是方法，函数对象
没有设置插槽名 默认#default， 只取一个可以不用{}
接受：函数@click='属性1'， 其他对象或值 {{ 属性2 }}
<!-- 父组件 -->
<template>
<div>
<child-component>
<!-- 使用作用域插槽传递函数对象 -->
<template #default="{ myMethod }">
<button @click="myMethod">Click me</button>
</template>
</child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
parentMethod() {
console.log('Parent method executed');
}
}
}
</script>
