vue3获取组件插槽数据？

  • Z时代
  • 2024-03-10
  • 分类：IT

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

回答：

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

<Comp v-slot="{ ref }">
  <Child :ref="ref"></Child>
</Comp>
vue">// 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: () => {}}))

以上是 vue3获取组件插槽数据？ 的全部内容， 来源链接： utcz.com/p/934970.html

回到顶部