vue中插槽属性的练习

插槽的作用是允许父组件向子组件中插入视图

父组件插入子组件的视图，是在父组件中渲染好之后，才插入子组件的

所谓插槽属性，就是在插槽上面绑定的属性

原先的slot-scope已经废弃了，下面使用的是v-slot

 

先定义一个带有插槽的子组件，且插槽上面有属性

<template>
    <div>
        <div>
            <h3>插槽一</h3>
            <!--插槽一具有user和grade2个属性-->
            <slot name="slot1" v-bind:user="user_" v-bind:grade="grade_">
                <span>{{user_.name}}</span><br/>
                <span>{{user_.age}}</span><br/>
                <span>{{grade_.name}}</span><br/>
                <span>{{grade_.count}}</span>
            </slot>
        </div>
        <hr/>
        <div>
            <h3>插槽二</h3>
            <!--插槽二具有product属性-->
            <slot name="slot2" v-bind:product="product">
                <a href="#">{{product.name}}</a><br/>
                <span>{{product.price}}</span>
            </slot>
        </div>
    </div>
</template>

<script>
    export default{
        data: function () {
            return{
                user_: {
                    name: '张三',
                    age: 18
                },
                grade_: {
                    name: '一年级',
                    count: 200
                },
                product: {
                    name: 'apple',
                    price: 2000
                }
            }
        }
    }
</script>

使用子组件的父组件

<template>
    <div>
        <MyComponent16_Slot>
            <!--准备放到插槽slot1中的视图,x是插槽一所有属性组成的对象，插槽一具有grade和user2个属性-->
            <template v-slot:slot1="x">
                <h2>{{x.user.name}}, {{x.user.age}}, {{x.grade.name}}, {{x.grade.count}}</h2>
            </template>

            <!--准备放到插槽slot2中的视图,y是插槽二所有属性组成的对象，插槽二具有product属性-->
            <template v-slot:slot2="y">
                <button>{{y.product.name}}</button><br/>
                <button>{{y.product.price}}</button>
            </template>
        </MyComponent16_Slot>

    </div>
</template>

<script>
    import MyComponent16_Slot from './MyComponent16_Slot.vue'
    export default{
        //局部注册子组件
        components: {
            MyComponent16_Slot
        }
    }
</script>