vue 复习，VUE插槽

很久没写博客，所以先写些简单，练练手

VUE插槽很简单

UserList组件（父组件）

<template>
        <div>
            <!--  slot 显示如此的简单 -->
            action is power
            <User >
                <p slot="xxx">xxx</p>
                <p slot="yyy">yyyyy</p>
            </User>
        </div>
</template>


<script>

import User from '@/components/User'
export default {
    components:{
        User
    },
    //data 是一个函数，返回的是一个大JSON 
    data(){
        return {
            show:false
        }
    },
    methods:{
        fn(){
            this.show = !this.show;
            // this.show = true;
        }
    }
}
</script>


<style >
   
</style>

子组件就是User.vue

<template>
    <!--  在这里我也可以定义插槽 -->
    <div>
        <p>
            {{name}}
        </p>

        <slot name ='xxx'></slot>
        <slot name ='yyy'></slot>
    </div>
</template>

<script>
export default {
    //老子我就接受一个name 属性
    // props:['name']
    props:{
        name:{
            type:String,
            required:false,
            default:'action'
        }
    }
}
</script>

<style>

</style>

显示结果： 

总结下，一定义插槽，在子组件中

 

二，使用子组件，给插槽传递数据

 

行，这节就到这里，很简单吧