vue3获取组件插槽数据?

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

阅读 3.5k
5 个回答

传给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

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

可以使用scope value

说实话和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
        }
    }
}
新手上路,请多包涵

let temp = proxy.$slots.default()[0] 拿到的是VNode,并不是组件实例

执行一下setup方法创建实例(独立于DOM的),
console.log(temp.type.setup(defaultSlot.props, {expose: () => {}}))

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题