组件高级1

slot-插槽的基本使用

​ 我们在使用组件的时候有时候希望，在组件内部定制化内容

组件的思想是可以复用的，把这个导航栏看做一个组件。

这个组件都可以分成三个部分，左边中间右边，如果可以分割组件，就可以定制化组件内容了。

 

```html

  <!-- 父组件 -->

  <div id="app">

 

    <cpn></cpn>

    <cpn>

      <span style="color:red;">这是插槽内容222</span>

    </cpn>

    <cpn>

      <i style="color:red;">这是插槽内容333</i>

    </cpn>

    <cpn></cpn>

 

  </div>

 

  <!-- 插槽的基本使用使用<slot></slot> -->

  <!-- 子组件 -->

  <template id="cpn">

 

    <div>

      <div>

        {{message}}

      </div>

      <!-- 插槽默认值 -->

      <slot><button>button</button></slot>

    </div>

  </template>

 

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

 

  <script>

    const cpn = {

      template: "#cpn",

      data() {

        return {

          message: "我是子组件"

        }

      },

    }

    const app = new Vue({

      el: "#app",

      data() {

        return {

          message: "我是父组件消息"

        }

      },

      components: {

        cpn

      },

    })

  </script>

```

 

> 简单使用插槽，定义template时候使用`slot`

 

```html

  <!-- 子组件 -->

  <template id="cpn">

    <div>

      <div>

        {{message}}

      </div>

      <!-- 插槽默认值 -->

      <slot><button>button</button></slot>

    </div>

  </template>

```

 

> 插槽可以使用默认值，`<button>button</button>`就是插槽的默认值。

 

```html

<cpn></cpn>

<cpn><span style="color:red;">这是插槽内容222</span></cpn>

```

 

> 使用插槽，`<span style="color:red;">这是插槽内容222</span>`将替换插槽的默

> 替换了两次插槽，两次未替换显示默认的button。

>

> 如果想实现组件分成三部分就可以使用三个`<slot></slot>`来填充插槽了。

 slot-具名插槽的使用

 

​ 具名插槽，就是可以让插槽按指定的顺序填充，而没有具名的插槽是按照你填充的顺序排列的，而具名插槽可以自定义排列。

 

```html

<!-- 父组件 -->

  <div id="app">

 

    <cpn>

      <span>没具名</span>

      <span slot="left">这是左边具名插槽</span>

      <!-- 新语法 -->

      <template v-slot:center>这是中间具名插槽</template>

      <!-- 新语法缩写 -->

      <template #right>这是右边具名插槽</template>

    </cpn>

  </div>

 

  <!-- 插槽的基本使用使用<slot></slot> -->

  <!-- 子组件 -->

  <template id="cpn">

 

    <div>

 

      <slot name="left">左边</slot>

      <slot name="center">中间</slot>

      <slot name="right">右边</slot>

      <slot>没有具名的插槽</slot>

    </div>

  </template>

 

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

 

  <script>

    const cpn = {

      template: "#cpn",

      data() {

        return {

          message: "我是子组件"

        }

      },

    }

    const app = new Vue({

      el: "#app",

      data() {

        return {

          message: "我是父组件消息"

        }

      },

      components: {

        cpn

      },

    })

  </script>

```

> 没有具名的插槽排在最后，因为在定义组件的时候，排在了最后，如果有多个按顺序排列。具名插槽按照自定义的顺序排列。

 

> 定义具名插槽，使用`name`属性，给插槽定义一个名字。

 

```html

  <!-- 插槽的基本使用使用<slot></slot> -->

  <!-- 子组件模板 -->

  <template id="cpn">

    <div>

      <slot name="left">左边</slot>

      <slot name="center">中间</slot>

      <slot name="right">右边</slot>

      <slot>没有具名的插槽</slot>

    </div>

  </template>

```

 

> 使用具名插槽，在自定义组件标签内使用`slot="left"`，插入指定插槽

 

```html

  <!-- 父组件 -->

  <div id="app">

    <cpn>

      <span>没具名</span>

      <span slot="left">这是左边具名插槽</span>

      <!-- 新语法 -->

      <template v-slot:center>这是中间具名插槽</template>

      <!-- 新语法缩写 -->

      <template #right>这是右边具名插槽</template>

    </cpn>

  </div>

```

 

> 注意：此处有是三种写法，获取指定插槽。