VUE组件化理解(二) v-slot的使用

VUE组件化理解(二) v-slot的使用

1.插槽的概念

child组件开标签和闭标签之间的内容正常不会显示在页面中，如果想要让他显示，用slot标签代表这些内容，想要让她在哪儿显示就放在模板的哪个位置

理解插槽：

组件就相当于是封装的html 那么插槽就相当于是封装函数里的参数，是每次调用时候都可以赋不同的值的东西

2.具名插槽(传递name属性)

给放在child开标签和闭标签之间的模板或者组件加上v-slot：自定义名字 的指令，在用的时候使用slot标签，在子组件中的 里面添加 name=‘自定义名字’ ，通过name属性选择调用哪个插槽。如果父组件中有一部分没有添加 slot 属性，则此处就是默认的插槽，在子组件中的slot直接就是使用的父组件的默认插槽部分

3.后备内容

在标签中的内容将在没有匹配到插槽内容时渲染

4.作用域插槽

插槽虽然是属于这个组件的，但是因为他没有放在组件的模板里，所以不能直接使用组件的data数据，如果要想使用组件的data 应该用属性传值的方法把数据传过去 在插槽里通过v-slot:xx="" 等号后面的值接收数据，接收到的数据是一个json 因为有可能传过来不只一个值

1. 如果被提供的内容只有一个默认插槽时，组件的标签可以直接被当做插槽的模板来使用
2. 动态参数也可是使用到插槽当中
3. v-slot的缩写是#，但是如果使用#的话，必须始终使用具插槽来代替

子组件定义

<template id="login">
    <div>
        <header>
            <slot name="head" :textcon="text" ></slot>
        </header>
        <p>{{text}}</p>
        <slot>AA</slot>
        <!-- 后备内容放在slot标签里，如果插槽没有传过来内容的话 默认显示AA，如果传过来内容就取代AA -->
        <footer>
            <slot name="foot"></slot>
        </footer>
    </div>
</template>
<script src="lib/vue.js"></script>
<script>
    Vue.component("child", {
        template: "#login",
        data() {
            return {
                text: "子组件的内容",
            }
        },
    })

    var vm = new Vue({
        el: "#app",
    })
</script>

父组件调用

在vue v2.6.0中，新引入了v-slot指令，他取代了slot和slot-scope这两个目前已经被废弃但是为被移除的特性。