vue-slot插槽

slot插槽

vue里提供了一种将父组件的内容和子组件的模板整合的方法：内容分发，通过slot插槽来实现。
slot

匿名插槽

在父组件中使用子组件的时候，在子组件标签内部写入内容，在子组件的模板中可以通过 来使用

<body>
    <div id="app">
        <!-- 匿名插槽 -->
        <tem>
            <div>内容a</div>
            <div>内容B</div>
        </tem>
    </div>
    <template id="tem">
        <div>
            <slot></slot>
            <h2>标题</h2>
            <slot></slot>
        </div>
    </template>
</body>
<script>
    Vue.component("tem", {
        template: "#tem",
    })
    new Vue({
        el: "#app",

    })
</script>
结果：内容a
     内容B
     标题
     内容a
     内容B

缺点：如果多个 不能自己设定每个放置的位置

具名插槽

父组件在子组件标签内写的多个内容我们可以给其设置slot属性来命名，在子组件的模板通过通过使用带有name属性的slot标签来放置对应的slot。

<body>
    <div id="app">
        <!-- 具名插槽 -->
        <tem>
            <div slot="a"> a内容</div>
            <div slot="b">内容b</div>
        </tem>
    </div>
    <template id="tem">
        <div>
            <slot name="a"></slot>
            <h2>标题</h2>
            <slot name="b"></slot>
        </div>
    </template>
</body>
<script>
    Vue.component("tem", {
        template: "#tem",
    })
    new Vue({
        el: "#app",

    })
</script>
结果：a内容
     标题
     内容b
v-slot作用域插槽

新版本2.6支持v-slot方式

注意：- 要引入2.6版本以上的vue.js）

​ - 在使用时，必须在template标签内

<body>
    <div id="app">
        <hello>
              <!-- 在template中设置v-slot a='info'接收数据数组对象,通过info. 调用数据 -->
            <template v-slot:a='info'>{{info.msg1}}</template>
              <!-- v-slot: 可简写成 # ，可以通过ES6的解构获取对象-->
            <template #a='{arr}'>{{arr}}</template>
        </hello>
    </div>
    <template id="hello">
        <div>
             <!-- 在组件模板的slot中绑定数据 -->
            <slot name="a" :msg1='msg'></slot>
            <h3>标题</h3>
            <slot name="b" :arr="arr"></slot>
        </div>
    </template>
</body>
<script>
    Vue.component('hello', {
        template: "#hello",
        data() {
            return{
            msg: "hello world",
            arr:[1,2,3,4,5]
        }
        }
    })
    new Vue({
        el: "#app",
    })
</script>
posted @ 2020-08-13 19:16  Cupid05  阅读(28)  评论(0)  编辑  收藏  举报