vue 插槽理解

Posted 2021-01-27 yzyh

插槽，顾名思义留一个坑在组件中，然后动态的去填坑，例如：

//Child.vue  子组件

<template>
    <div>
            <slot></slot>
    </div>
</template>
<script>
</script>
<style lang="">
    
</style>


//Parent.vue   引入子组件的文件

<template>
    <div>
            <my-child>
                    123
            </my-child>
    </div>
</template>
<script>
import Child from './Child'
export default {
   components: {myChild: Child}
}
</script>
<style lang="">
    
</style>

//这个时候，我们的页面就会显示123,在Child.vue中我们使用的slot就是坑位，在Parent.vue中，引用组件中传入的123就是填坑的内容，因为slot没有命名，这里称为不具名插槽

那么现在咱们来看看具名插槽的写法

//Child.vue  子组件

<template>
    <div>
            <h1>--------------分割线--------------------</h1>
            <slot name="navBar"></slot>
            <h1>--------------分割线--------------------</h1>
            <slot name="endBar"></slot>
            <h1>--------------分割线--------------------</h1>
    </div>
</template>
<script>
</script>
<style lang="">
    
</style>

//Parent.vue   引入子组件的文件

<template>
    <div>
            <my-child>
                    <template slot="navBar">
                            234
                    </template>
                    <template slot="endBar">
                            345
                    </template>
            </my-child>
    </div>
</template>
<script>
import Child from './Child'
export default {
   components: {myChild: Child}
}
</script>
<style lang="">
    
</style>

//这个时候我们需要注意的是，在Child.vue中，用name来标识该插槽slot，而在使用中，我们用<template slot="表示名">来传入指定的插槽

还有一个插槽方式叫做作用域插槽

//Child.vue  子组件

<template>
    <div>
             <!-- 这里的test作为键  ParentFromData 作为值返回给父组件 {test:  'Hello Vue!!!'}-->
            <slot :test="ParentFromData"></slot>
    </div>
</template>
<script>
export default {
    prop: ['ParentFromData']
}
</script>
<style lang="">
    
</style>


//Parent.vue   引入子组件的文件

<template >
    <div>
            <my-child :ParentFromData='data'>
                    <template slot-scope='ChildFromData'>
                          {{ChildFromData}}
                    </template>
            </my-child>
    </div>
</template>
<script>
import Child from './Child'
export default {
   data(){
        return{
            data: 'Hello Vue!!!'
        }
    }
   components: {myChild: Child}
}
</script>
<style lang="">
    
</style>

//此时的流程是，Parent.vue通过  prop 将 ParentFromData传递给Child.vue,而Child.vue拿到值以后将值赋值给test  形成键值对{test: 'Hello Vue!!!'} 返回给Parent.vue,从而页面显示的结果为{test: 'Hello Vue!!!'}
//我发现一个vue文件里面只能有一个作用域插槽