vue插槽插槽是什么 <slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slo

插槽是什么

<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染

插槽的使用条件

        1. 父子组件之间
        2. 子组件定义插槽
        3. 父组件定义插槽内容

有具体名称的插槽

        1. 插槽设定名称
        2. 父组件根据名称放内容

作用域插槽

        插槽传参
        1. 子组件中slot插槽标签绑定属性
        2. 父组件使用插槽处接收属性

插槽案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插槽</title>
    <style>
        #app{
            background-color: skyblue;
            height: 700px;
        }

        .c1{
            background-color: pink;
            height: 400px;
        }

    </style>
</head>
<body>
    <div id="app">
        <h2>父组件</h2>
        <child>
            <template v-slot:flower>
                <p>花</p>
            </template>
            <template v-slot:tree="treeSlot">
                <p>树</p>
                <p>{{treeSlot.title}}</p>
            </template>
            <template>
                <p>默认草</p>
            </template>
        </child>
    </div>
    <template id="child-template">
        <div class="c1">
            <h2>子组件-公路</h2>
            <!-- 插槽 -->
            <slot name="flower"></slot>
            <p>绿化带</p>
            <slot name="tree" :title="title"></slot>
            <p>绿化带</p>
        </div>
    </template>
    <script src="../lib/vue.global.js"></script>
    <script>
        const {createApp}=Vue
        //子组件
        const Child={
            template:'#child-template',
            data(){
                return{
                    title:'子组件中的数据',
                };
            },
        }
        createApp({
            components:{
                Child
            }
        }).mount('#app')
    </script>
</body>
</html>