vue scopedSlots问题

Question

<div id="app">
    <a-a v-slot="a">
        {{a.text}}
    </a-a>
</div>
<script src="vue.js"></script>
<script>
    Vue.component("a-a",
        {
            render: function (createElement)
            {
                return createElement("div", [createElement("child", {
                // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
                scopedSlots: {
                    default: function (props)
                    {
                        return createElement("span", props.text);
                    }
                }
            })]);
            },
            props: {
                message: {
                    type: String,
                    default:"你好啊!"
                }
            }
    });
    
    

也不知道什么问题，文档也没给出代码，大佬看看哪里出问题，

Answer 1

你child是组件，你的scopedSlot的处理应该在child里定义

Vue.component('child', {
    render() {
        return this.$scopedSlots.default({text: '来自子组件的数据'})
    }
})
Vue.component('a-a', {
    template: '<div> <child v-slot="props"> <span>{{ props.text }}</span> </child> </div>'
})
new Vue({
    el: '#app',
})

本来数据是单向的，是从父组件通过props传给子组件的，
作用域插槽相当于提供了一个逆向过程，有了作用域插槽子组件可以给父组件传数据了。default(给父组件的数据)，v-slot定义的是接收这个数据的变量名。这里的default是默认的意思，如果v-slot:[name]你这里的插槽名称有指定别的名称的话，相对应的子组件的$scopedSlots.[name]也要更改