随笔- 239  文章- 79  评论- 773 

  Vue提供了一种内容分发技术,可将父组件中的内容传递给子组件的模板,实现方式参照了Web组件规范草案。

一、插槽

  Vue内置了一个<slot>元素,能作为插槽(slot)存在,而插槽内可包含文本、HTML片段、组件等。以下面的btn组件为例,其模板中包含一个<slot>元素,在DOM中为btn组件添加了文本内容。

<btn>提交</btn>
<script>
  Vue.component("btn", {
    template: '<button><slot></slot></button>'
  });
</script>

  渲染出的<button>元素会包含“提交”,即插槽被替换成了分发的内容,如下所示。

<button>提交</button>

  在插槽中允许添加默认的内容(即为<slot>元素附加内容,如下所示),当父组件没有传递内容时,它们就会被渲染。

Vue.component("btn", {
  template: '<button><slot>提交</slot></button>'
});

二、具名插槽

  具名插槽是指包含名称的插槽,即指定了name特性的<slot>元素。当组件的模板中需要多个插槽时,就得通过名称来加以区分。例如有一个page组件,包含三个<slot>元素,其中有两个声明了name特性,如下所示。

Vue.component("page", {
  template: `<div>
        <header><slot name="header"></slot></header>
        <section><slot></slot></section>
        <footer><slot name="footer"></slot></footer>
    </div>`
});

  如果要向具名插槽传递内容,那么可以在<template>元素上使用v-slot指令,并让插槽名称成为它的参数,如下所示。

<page>
  <template v-slot:header>
    <h1>头部</h1>
  </template>
  <p>内容</p>
  <template v-slot:footer>
    <h1>尾部</h1>
  </template>
</page>

  渲染出的DOM结构如下所示,分发的内容替换了对应的插槽。

<div>
  <header>
    <h1>头部</h1>
  </header>
  <section>
    <p>内容</p>
  </section>
  <footer>
    <h1>尾部</h1>
  </footer>
</div>

  所有没有被包裹在带v-slot指令的<template>元素中的内容(例如上面的<p>元素),都会传递给没有名称的插槽(即默认插槽)。

  注意,一个不带name特性的<slot>元素,其实也有名称,叫default。在v-slot指令中,也可以对其进行指定,如下所示。

<template v-slot:default>
  <p>内容</p>
</template>

  v-slot指令不仅支持动态参数,还允许特殊的缩写,即将参数前的v-slot:替换成#号,如下所示。

<template v-slot:[obj.header]></template>
<template #header></template>

三、作用域插槽

  在讲解作用域插槽之前,需要要先了解一下编译作用域。

1)编译作用域

  父组件模板中的内容都是在父级作用域中编译的,而子组件模板中的内容都是在子级作用域中编译的,即两级作用域中的数据无法相互访问。下面以btn组件为例,它的模板中包含一个插槽,并在数据对象中声明了一个txt属性。

Vue.component("btn", {
  data: function() {
    return { txt:"提交" };
  },
  template: '<button><slot></slot></button>'
});

  在为btn组件提供插值形式的内容时,如下代码所示,由于当前作用域不存在txt属性,因此会抛出错误。

<btn>{{txt}}</btn>

2)作用域插槽

  这是一种特殊的插槽,其内容可访问子组件中的数据,即把模板传给插槽而不是渲染好的内容。还是以btn组件为例,与之前不同的是,为<slot>元素自定义了一个txt特性,并为其绑定数据对象的txt属性,如下所示。

Vue.component("btn", {
  data: function() {
    return { txt:"提交" };
  },
  template: '<button><slot :txt="txt"></slot></button>'
});

  在使用btn组件时,需要为v-slot指令传递一个变量,名称可自定义(例如slots),其值是由插槽上的自定义特性所组成的对象。

<btn>
  <template v-slot:default="slots">
    {{slots.txt}}
  </template>
</btn>

  当只提供了默认插槽时,可将v-slot指令转移到组件上,并且可省略default名称,如下所示。

<btn v-slot="slots">
  {{slots.txt}}
</btn>

  注意,缩写形式的默认插槽不能与具名插槽混用,因为这样会导致作用域不明确。

<btn v-slot="slots">
  {{slots.txt}}
  <template v-slot:custom></template>
</btn>

 

 posted on 2019-11-11 09:51  咖啡机(K.F.J)  阅读(...)  评论(... 编辑 收藏