当前位置：首页 > news >正文

前端流行框架Vue3教程：21. 插槽（3）

news 来源：原创 2025/6/16 12:02:44

21. 插槽（3）

在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。
我们也确实有办法这么做！可以像对组件传递props那样，向一个插槽的出口上传递attributes

SlotsAttr.vue

<script>
/*** 定义一个Vue组件* 该组件包含一个名为childMessage的数据属性，用于传递信息到子组件*/
export default {data() {// 初始化组件的数据属性return {childMessage: '子组件数据'}}
}
</script><template><!-- 组件标题 --><h3>Slots3</h3><!-- 定义一个插槽，并传递childMessage数据属性给子组件 --><slot :msg="childMessage"></slot>
</template>

App.vue

<script>
// 导入SlotsAttr组件，用于展示插槽内容
import SlotsAttr from "@/components/SlotsAttr.vue";// 定义当前组件的导出对象
export default {// 注册组件components: {SlotsAttr},// 定义数据属性data() {return {// 当前测试内容currentTest: "测试内容"}}
}
</script><template><!-- 使用SlotsAttr组件，并通过v-slot指令定义默认插槽的内容 --><SlotsAttr v-slot="slotProps"><!-- 展示来自组件内部的数据 --><h3>{{ currentTest }}</h3><!-- 展示来自SlotsAttr组件传递的msg属性 --><h3>{{ slotProps.msg }}</h3></SlotsAttr>
</template>

具名插槽传递数据

SlotsAttr.vue

<script>
export default {data() {// 初始化组件的数据属性return {childMessage: '具名子组件数据',jobMessage: '程序员'}}
}
</script><template><h3>Slots3</h3><slot name="header" :msg="childMessage"></slot><slot name="main" :job="jobMessage"></slot>
</template>

App.vue

<script>import SlotsAttr from "@/components/SlotsAttr.vue";export default {components: {SlotsAttr},data() {}
}
</script><template><SlotsAttr><template #header="slotProps"><h3>{{ slotProps.msg }}</h3></template><template #main="slotProps"><p>{{ slotProps.job }}</p></template></SlotsAttr>
</template>