vue中的匿名插槽和带值插槽的使用方式

1.1 这边是子组件其实是在这边占一个位置

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "index.vue",
        data(){
            return{
                message:'admin'
            }
        }
    }
</script>

<style scoped>

</style>

1.2 这边是父组件,slot-company是引用的子组件，在子组件中如果使用了slot则会显示在父组件定义的数据值。

 <slot-company>
    需要显示的值
 </slot-company>

 import SlotCompany from './components/slot'
    export default {
        name: 'app',
        components: {
            HelloWorld,
            ModelOpen,
            SlotCompany
        },

1.3 可以传值的插槽(当前在子组件中)

1.3.1 在return定义一个message的字符变量,初赋值为admin
1.3.2 动态绑定slot如下图

<template>
    <div>
        <slot :data="message"></slot>
    </div>
</template>

<script>
    export default {
        name: "index.vue",
        data(){
            return{
                message:'admin'
            }
        }
    }
</script>

<style scoped>

1.4在父组件中如何使用

1.4.1 在父组件中接受子组件中的插槽值<template slot-scope="message"></template>
1.4.2 这边的message与子组件中的绑定值一致 <slot :data="message"></slot>
1.4.3 显示在子组件中的值为 <span>{{message.data}}</span>

 <slot-company>
    <template slot-scope="message">
     <span>{{message.data}}</span>
    </template>
 </slot-company>

这个是两个插槽的方式,希望有人喜欢

子组件

// 写专门的插槽

父组件


<!--
{{message.data}} —
-->

多