vue 插槽slot

作者: Gino_Li | 来源:发表于2019-04-11 20:44 被阅读0次

Vue之深入理解插槽—slot, slot-scope, v-s
vue插槽
vue中的slot（插槽）
vue 插槽的使用
18、Vue3 作用域插槽
vue3-slot-消息框-模态框
slot是什么？有什么作用？原理是什么？
slot（插槽）
slot 用法以及使用场景
Vue中Slot的渲染过程

具名插槽

使用的时候将需要的内容写在template标签中,并且通过v-slot:name(name表示插槽的名字)指令来指定插入的位置.

<body>
    <div id="app">
        <tab>
            <template v-slot:header>
                <div>我是插到header里面的元素</div>
            </template>
            <template v-slot:section>
                <div>我插入到了section元素里面</div>
            </template>
        </tab>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var tab = {
            template:`
                    <div>
                        <header>
                            <input type="text" placeholder="新不了情" />
                            <slot name="header"></slot>
                        </header>
                        <section>
                            <slot name="section"></slot>
                        </section>
                    </div>`
        }
        var vm = new Vue({
            el:"#app",
            components:{
                tab
            }
        })
    </script>
</body>

无名插槽

直接写需要插入的内容即可,内容将会插入到所有无名插槽中

<body>
    <div id="app">
        <tab>
                      <div>hello world</div>
        </tab>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var tab = {
            template:`
                    <div>
                        <footer>
                            <slot></slot>
                        </footer>
                    </div>`
        }
        var vm = new Vue({
            el:"#app",
            components:{
                tab
            }
        })
    </script>
</body>

vue-cli中应用

父组件

<test-one v-bind:list="message" v-on:getSonsData="sonData">
      //无名插槽
    {{getData}}
    插槽

    <template v-slot:head>
        <p>我的内容插到到具名插槽中</p>
    </template>
</test-one>

子组件

        test页面的子组件
        <div class="header">
            <!--具名插槽-->
            <slot name="head"></slot>
        </div>
        {{list}}
        <button @click="toparent">发送数据给父组件</button>
        <!--插槽-->
        <slot></slot>