Vue 组件 - Slot 内容分发

<script>
    Vue.component("child", {
        template:`
        <div>
            child
            <slot></slot>
        </div>
        `
    })

    let vm = new Vue({
        el:"#box"
    })
</script>

使用插槽

写一行会在插槽中显示一行，多行的话，也会出现多行；

示例如下：

<div id="box">
    <!--当前组件或者节点 在哪个模板中，就能访问哪个模板状态-->
    <child>
        <div>面朝大海</div>
        <div>春暖花开</div>
    </child>
</div>

效果如下：

这叫做单个插槽写法。

具名插槽

如果要使用多个自定义内容的，可以使用具名插槽。

修改原有组件内容，改为具名插槽格式。

示例如下：

Vue.component("child", {
    template:`
    <div>
        child
        <slot name="a"></slot>
        <slot name="b"></slot>
        <slot name="c"></slot>
        <slot></slot>
    </div>
    `
})

组件使用slot，进行对号入座。

示例如下：

<div id="box">
    <!--当前组件或者节点 在哪个模板中，就能访问哪个模板状态-->
    <child>
        <div slot="a">面朝大海</div>
        <div slot="b">春暖花开</div>
        <div slot="c">从明天起做一个快乐的人</div>
        <div>劈柴喂马 关心粮食和蔬菜</div>
    </child>
</div>

效果如下：

插槽实现导航

利用slot可以实现导航栏和导航图标的灵活显示。

使用slot插槽后不再受到内置组件限制。

示例如下：

<div id="box">
    <!--当前组件或者节点 在哪个模板中，就能访问哪个模板状态-->
    <navbar>
        <button slot="left"> < 返回</button>
        <i class="icon" slot="right">字体图标</i>
    </navbar>
</div>
<script>
    Vue.component("navbar", {
        template:`
        <div>
            <slot name="left"></solt>
            <span>navbar</span>
            <slot name="right"></solt>
        </div>
        `
    })

    let vm = new Vue({
        el:"#box"
    })
</script>

使用插槽优点

通过插槽自定义导航栏两侧的内容。

扩展组件能力，提高组件复用性。

新版slot

新版slot是2.6版本的vue。并不是3后的版本。

以前的slot不知道算属性还是指令。

现在明确为指令写法，#号为简写方式，上面是指令写法。

定义组件和插槽不需修改。

示例如下：

<child>
    <template v-slot:a>
        <div>面朝大海</div>
    </template>
    <template v-slot:b>
        <div>春暖花开</div>
    </template>
</child>

Or

<navbar>
    <template #left>
        <button> < 返回 </button>
    </template>
    <template #right>
        <i class="icon">字体图标</i>
    </template>
</navbar>

官网示例

插槽版抽屉

对原有的抽屉（子传父示例）改为插槽版。

即原来的导航列表的打开和关闭功能。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="box">
  <navbar>
    <button @click="isShow=!isShow">点击</button>
  </navbar>
  <sidebar v-show="isShow"></sidebar>
</div>
<script>
  // 定义一个全局组件
  Vue.component("navbar", {
    template: `<div style="background-color: red">
            nabbar- <slot></slot>
        </div>`,
  })

  Vue.component("sidebar", {
    template:`<div style="background-color: yellow">
    <ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ul>
</div>`
  })
  let vm = new Vue({
    el:"#box",
    data:{
      isShow: true
    }
  })
</script>
</body>
</html>

去掉Vue原有监听和触发事件，只通过isShow取反后的值判断来显示。