【子向父传参二】Vue-cli脚手架创建项目之父组件向子组件传递参数之slot属性+slot标签插槽方法

阳光穿透心脏的1/2处 2021-09-18 10:50 159阅读 0赞

Child.vue文件（子向父传参之slot）
    
    
    
    <template>
        <div class="child">
            <p><span>这里是子组件的地盘！！！{
       { parent_value }}</span></p>
    
            # v-slot子组件传递参数的核心位置：
            # user是子组件中才有的数据，传入父组仅slot作用域位置中可以使用！
            <slot :user="user" ></slot>
            <slot name="parent001"></slot>
        </div>
    
    </template>
    
    
    <script>
        export default {
            name: 'child',
            data () {
                return {
                    user: { firstname: '父组件name', lastname: '子组件name' }
                };
            }
        };
    </script>
    
    <style lang="scss">
    
    </style>

Parent.vue文件（父接收参数之slot）
    
    
    <template>
        <div class="parent">
            <p><span>这里是父组件的地盘！！！</span></p>
    
            # v-slot父组件接收参数的核心位置：
            # v-slot是v-slot:default的简写,把子组件中slot(name="default")标签传入的参数添加到对象slot_props
            # 如果是v-slot:parent001的简写,那么子组件中slot(name="parent001")标签传入的参数添加到对象slot_props
            <Child v-slot="slot_props">
                <h1>slot为default的插槽内容显示=>{
       {slot_props.user.firstname}}</h1>
                <h1 slot="parent001">parent第一个slot</h1>
            </Child>
        </div>
    </template>
    
    <script>
        import Child from '@/components/test/Child';
    
        export default {
            name: 'parent',
            components: {
                Child
            }
        };
    </script>
    
    <style lang="scss">
    
    </style>