vue 插槽理解

Posted yzyh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 插槽理解相关的知识,希望对你有一定的参考价值。

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

//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文件里面只能有一个作用域插槽

以上是关于vue 插槽理解的主要内容,如果未能解决你的问题,请参考以下文章

vue插槽slot理解

vue Slot理解

Vue插槽slot理解与初体验 ~

vue 2.6 插槽更新 v-slot 用法总结

Vue 开发之插槽(slot)的理解和使用

vue 插槽理解