javascript - vue3获取组件插槽数据？

Question

在调用这个组件的地方
接收childer组件作为插槽，在parent中
获取不到默认插槽的属性b，不知道为什么

Answer 1

说实话和2差距不大，
就是整个数据的调用模式换了一下，
推荐看一下官网的例子，我自己的笔记不确定能不能理解，压缩了太多

// 父组件传递给子级provide 和 inject // 通过 v-model 实现参数传递<MyComponent v-model:title="Hello Word!" />export default defineComponent(    (props, { emit }) => {        emit('update:title', ’this is title‘)；        return () => h('div', props.title)    },    {         props: { title: String },        emits: [ 'update:title' ]    })// 组件调用 - 插槽// template#[name] || v-slot="[name]" 匹配插槽// template#[name]="{[key], ...}" 获取插槽作用域<MyComponent">    <template #[name]="{[key], ... }">        <span>{{[key]}}</span>    <template></MyComponent>    // 组件定义 - 插槽// [data] 插槽具名// [key] 具名插槽作用域<div class="container">    <header>        <slot [name]="title" :[key]="`Hello Word`">            parent node was no title !!        </slot>        </header></div>// 数据注入// 通过响应式数据的形式，能实现 Provide 数据的自由切换import { inject, provide, ref， computed } from 'vue';export default {    setup(){        const title = ref('no title, wait for write !');        const updateTitle = () => title.value = 'Hello Word!';                // 获取父辈组件提供的数据        const name = inject('name');        // 为后代组件提供数据        provide('title', title);                        return {            title,            updateTitle        }    }}

Answer 2

既然parent要拿到第一个slot的内容，为什么不把childer直接写在parent内部？看起来父子组件是有强关系的。然后引用childer时定义个refs，这样肯定可以拿到childerRef.value.b

Answer 3

传给slots的参数除了name都会变成props，因此直接传ref行不通，可以在外层再手动把ref传给放在插槽的组件

<Comp v-slot="{ ref }">  <Child :ref="ref"></Child></Comp>

// Comp<template><div>  <slot ref='slotRef'></slot></div></template><script setup>import {ref, onMounted} from 'vue'const slotRef = ref()onMounted(()=>{  // 拿到slot  console.log(slotRef.value)})function add() {    slotRef.value.add()}</script>

demo