如何从子组件向父组件传递slot属性？编译报错修复

错误原因 #

• 子组件存在拼写错误：date()应为data()，Vue无法识别错误的选项名，会导致组件初始化异常，进而触发编译错误。
• 父组件作用域插槽用法错误：命名插槽的作用域变量必须在该插槽自身的v-slot指令中接收，你错误地尝试通过默认插槽的v-slot="slotProps"来获取命名插槽的属性，这种混用写法会让Vue编译时无法正确生成代码节点，最终抛出Codegen node is missing错误。
• 子组件中传递给slot的hi变量未定义：你在slot绑定了:text="hi"，但组件的data中没有声明这个变量，会导致运行时变量不存在的问题。

修复方案 #

修复子组件代码 #

<template>
    <button id="idDigitizePolygonBtn" class="clsDigitizePolygonBtn" :disabled="isDigitizePolygonBtnDisabled">
        <slot name="slotDigitizePolygonBtnLabel" :text="hi"></slot>
    </button>
</template>

<script>
export default {
    data() { // 修正date为data
        return {
            digitizePolygonBtnDisabilityState: this.isDigitizePolygonBtnDisabled,
            hi: '我是插槽传递的文本' // 定义hi变量，可自定义内容
        };
    },
    props: {
        isDigitizePolygonBtnDisabled: {
            type: Boolean,
            required: true,
            default: false,
        },
    },
};
</script>

修复父组件代码 #

<DigitizePolygonButton :isDigitizePolygonBtnDisabled="false">
    <!-- 在命名插槽的v-slot中直接接收作用域变量 -->
    <template v-slot:slotDigitizePolygonBtnLabel="slotProps"> 
        {{ slotProps.text }} 
    </template>
</DigitizePolygonButton>

可选优化写法：使用解构简化变量接收

<DigitizePolygonButton :isDigitizePolygonBtnDisabled="false">
    <template v-slot:slotDigitizePolygonBtnLabel="{ text }"> 
        {{ text }} 
    </template>
</DigitizePolygonButton>

内容的提问来源于stack exchange，提问作者Amrmsmb