前方的话

前边的话

  为了让组件能够结合,必要1种艺术来混合父组件的内容与子组件自身的模版。这么些历程被叫做
内容分发 (或 “transclusion” )。Vue达成了2个内容分发 API,参照了当下
Web 组件标准草案,使用特殊的 <slot>
成分作为土生土长内容的插槽。本文将详细介绍Vue内容分发slot

 

为了让组件能够组合,必要一种方法来混合父组件的开始和结果与子组件自身的模板。那几个进度被誉为
内容分发 (或 “transclusion” )。Vue达成了三个剧情分发 API,参照了日前 Web
组件规范草案,使用异乎平时的 <slot>
成分作为原有内容的插槽。本文将详细介绍Vue内容分发slot

编译作用域

  在深深内容分发 API 在此之前,先显著内容在哪个功效域里编写翻译。假定模板为

<child-component>
  {{ message }}
</child-component>

message
应该绑定到父组件的数额,依旧绑定到子组件的多少?答案是父组件。组件作用域轻易地正是:父组件模板的从头到尾的经过在父组件成效域内编写翻译;子组件模板的剧情在子组件功效域内编译。

  1个左近错误是希图在父组件模板内将多个指令绑定到子组件的属性/方法:

<!-- 无效 -->
<child-component v-show="someChildProperty"></child-component>

  假定someChildProperty是子组件的属性,上例不会如预期工作。父组件模板不应有知道子组件的景色

  如若要绑定效用域内的通令到叁个零部件的根节点,应当在组件本人的沙盘上做:

Vue.component('child-component', {
  // 有效,因为是在正确的作用域内
  template: '<div v-show="someChildProperty">Child</div>',
  data: function () {
    return {
      someChildProperty: true
    }
  }
})

  类似地,分发内容是在父功用域内编译

 

编写翻译成效域

暗中同意抛弃

  一般地,若是子组件模板不带有<slot>插口,父组件的剧情将会被丢弃

var parentNode = {
  template: `
  <div class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </div>
  `,
  components: {
    'child': childNode
  },
};

<div id="example">
  <parent></parent>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var childNode = {
  template: `
  <div class="child">
    <p>子组件</p>
  </div>
  `,
};
var parentNode = {
  template: `
  <div class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </div>
  `,
  components: {
    'child': childNode
  },
};
// 创建根实例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>

  如下图所示,<child>所含有的<p>测试内容</p>被废弃

永利开户送38元体验金 1

 

在深远内容分发 API 从前,先明了内容在哪个功能域里编写翻译。假定模板为

内联模板

  假使实组件有 inline-template
个性,组件将把它的内容作为它的沙盘,而忽视真实的模版内容

  但是 inline-template 让模板的成效域难以知晓

var childNode = {
  template: `
  <div class="child">
    <p>子组件</p>
  </div>
  `,
};

var parentNode = {
  template: `
  <div class="parent">
    <p>父组件</p>
    <child inline-template>
      <p>测试内容</p>
    </child>
  </div>
  `,
  components: {
    'child': childNode
  },
};

永利开户送38元体验金 2

 

<child-component>
 {{ message }}
</child-component>

匿名slot

  当子组件模板只有3个从未品质的 slot 时,父组件全副内容片段将插入到
slot 所在的 DOM 地方,并替换掉 slot 标签本身

var childNode = {
  template: `
  <div class="child">
    <p>子组件</p>
    <slot></slot>
  </div>
  `,
};

var parentNode = {
  template: `
  <div class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </div>
  `,
  components: {
    'child': childNode
  },
};

永利开户送38元体验金 3

  假诺出现多于3个的无名氏slot,vue将报错

var childNode = {
  template: `
  <div class="child">
    <p>子组件</p>
    <slot></slot>
    <slot></slot>
  </div>
  `,
};

永利开户送38元体验金 4

【默认值】

  最初在 <slot>
标签中的任何内容都被视为备用内容,或许叫做默许值。备用内容在子组件的作用域内编写翻译,并且唯有在宿主成分为空,且并未有要插入的内容时才显得备用内容

  当slot存在默许值,且父成分在<child>中尚无要插入的源委时,突显暗中认可值

var childNode = {
  template: `
  <div class="child">
    <p>子组件</p>
    <slot><p>我是默认值</p></slot>
  </div>
  `,
};
var parentNode = {
  template: `
  <div class="parent">
    <p>父组件</p>
    <child></child>
  </div>
  `,
  components: {
    'child': childNode
  },
};

永利开户送38元体验金 5

  当slot存在暗许值,且父成分在<child>中存在要插入的内容时,则显得设置值

var childNode = {
  template: `
  <div class="child">
    <p>子组件</p>
    <slot><p>我是默认值</p></slot>
  </div>
  `,
};
var parentNode = {
  template: `
  <div class="parent">
    <p>父组件</p>
    <child>
      <p>我是设置值</p>
    </child>
  </div>
  `,
  components: {
    'child': childNode
  },
};

永利开户送38元体验金 6

 

message
应该绑定到父组件的数据,依然绑定到子组件的数量?答案是父组件。组件成效域轻松地就是:父组件模板的内容在父组件成效域内编写翻译;子组件模板的情节在子组件成效域内编写翻译。

具名Slot

<slot> 成分能够用1个特有的属性 name 来配置怎么着分发内容。多少个slot 能够有例外的名字。签名 slot 将相称内容片段中有对应 slot
天性的要素

var childNode = {
  template: `
  <div class="child">
    <p>子组件</p>
    <slot name="my-header">头部默认值</slot>
    <slot name="my-body">主体默认值</slot>
    <slot name="my-footer">尾部默认值</slot>
  </div>
  `,
};

var parentNode = {
  template: `
  <div class="parent">
    <p>父组件</p>
    <child>
      <p slot="my-header">我是头部</p>
      <p slot="my-footer">我是尾部</p>
    </child>
  </div>
  `,
  components: {
    'child': childNode
  },
};

永利开户送38元体验金 7

  依然能够有贰个佚名 slot,它是默认
slot
,作为找不到格外的原委片段的备用插槽。无名slot只雅观做未有slot属性的要素的插槽,有slot属性的成分如果未有安插slot,则会被遗弃

var childNode = {
  template: `
  <div class="child">
    <p>子组件</p>
    <slot name="my-body">主体默认值</slot>
    <slot></slot>
  </div>
  `,
};

var parentNode = {
  template: `
  <div class="parent">
    <p>父组件</p>
    <child>
      <p slot="my-body">我是主体</p>
      <p>我是其他内容</p>
      <p slot="my-footer">我是尾部</p>
    </child>
  </div>
  `,
  components: {
    'child': childNode
  },
};

  <p slot=”my-body”>插入<slot
name=”my-body”>中,<p>小编是此外剧情</p>插入<slot>中,而<p
slot=”my-footer”>被舍弃

永利开户送38元体验金 8

  假如未有暗许的 slot,那个找不到非常的源委片段也将被撇下

var childNode = {
  template: `
  <div class="child">
    <p>子组件</p>
    <slot name="my-body">主体默认值</slot>
  </div>
  `,
};

var parentNode = {
  template: `
  <div class="parent">
    <p>父组件</p>
    <child>
      <p slot="my-body">我是主体</p>
      <p>我是其他内容</p>
      <p slot="my-footer">我是尾部</p>
    </child>
  </div>
  `,
  components: {
    'child': childNode
  },
};

  <p>笔者是别的剧情</p>和<p slot=”my-footer”>都被撤废

永利开户送38元体验金 9

 

八个常见错误是绸缪在父组件模板内将3个发令绑定到子组件的质量/方法:

效用域插槽

  作用域插槽是一种特别类型的插槽,用作使用3个 (能够传递数据到)
可选择模板替换已渲染成分。

  在子组件中,只需将数据传递到插槽,就如将 props 传递给组件一样

<div class="child">
  <slot text="hello from child"></slot>
</div>

  在父级中,具备极其属性 scope<template>
成分必须存在,表示它是功能域插槽的沙盘。scope
的值对应二个一时变量名,此变量接收从子组件中传递的 props 对象

var childNode = {
  template: `
  <div class="child">
    <p>子组件</p>
      <slot xxx="hello from child"></slot>
  </div>
  `,
};
var parentNode = {
  template: `
  <div class="parent">
    <p>父组件</p>
    <child>
      <template scope="props">
        <p>hello from parent</p>
        <p>{{ props.xxx }}</p>
      </template>
    </child>
  </div>
  `,
  components: {
    'child': childNode
  },
};

  借使渲染以上结果,得到的出口是

永利开户送38元体验金 10

【列表组件】

  成效域插槽更具代表性的用例是列表组件,允许组件自定义应该怎么渲染列表每一项

var childNode = {
  template: `
  <ul>
    <slot name="item" v-for="item in items" :text="item.text">默认值</slot>
  </ul>
  `,
  data(){
    return{
      items:[
        {id:1,text:'第1段'},
        {id:2,text:'第2段'},
        {id:3,text:'第3段'},
      ]
    }
  }
};

var parentNode = {
  template: `
  <div class="parent">
    <p>父组件</p>
    <child>
      <template slot="item" scope="props">
        <li>{{ props.text }}</li>
      </template>
    </child>
  </div>
  `,
  components: {
    'child': childNode
  },
};

永利开户送38元体验金 11

 

<!-- 无效 -->
<child-component v-show="someChildProperty"></child-component>

永利开户送38元体验金,假如someChildProperty是子组件的习性,上例不会如预期职业。父组件模板不应有知道子组件的地方

举个例子要绑定成效域内的下令到1个零件的根节点,应当在组件自身的模版上做:

Vue.component('child-component', {
 // 有效,因为是在正确的作用域内
 template: '<div v-show="someChildProperty">Child</div>',
 data: function () {
 return {
  someChildProperty: true
 }
 }
})

好像地,分发内容是在父功效域内编写翻译

暗中认可放任

貌似地,如若子组件模板不含有<slot>插口,父组件的剧情将会被扬弃

var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p>测试内容</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};


<div id="example">
 <parent></parent>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p>测试内容</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

如下图所示,<child>所蕴藏的<p>测试内容</p>被丢掉

永利开户送38元体验金 12

匿名slot

当子组件模板只有四个尚无品质的 slot 时,父组件全副内容片段将插入到 slot
所在的 DOM 位置,并替换掉 slot 标签本身

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot></slot>
 </div>
 `,
};


var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p>测试内容</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

永利开户送38元体验金 13

若是出现多于1个的无名slot,vue将报错

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot></slot>
 <slot></slot>
 </div>
 `,
};

永利开户送38元体验金 14

【默认值】

最初在 <slot>
标签中的任何内容都被视为备用内容,恐怕叫做私下认可值。备用内容在子组件的作用域内编写翻译,并且唯有在宿主成分为空,且未有要插入的内容时才显得备用内容

当slot存在私下认可值,且父成分在<child>中并未要插入的剧情时,呈现私下认可值

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot><p>我是默认值</p></slot>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child></child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

永利开户送38元体验金 15

当slot存在暗中认可值,且父成分在<child>中设有要插入的源委时,则突显设置值

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot><p>我是默认值</p></slot>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p>我是设置值</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

永利开户送38元体验金 16

具名Slot

<slot>
成分能够用三个特别的属性
name
来配置哪些分发内容。五个 slot 能够有分歧的名字。具名 slot
将同盟内容片段中有对应
slot 天性的因素

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-header">头部默认值</slot>
 <slot name="my-body">主体默认值</slot>
 <slot name="my-footer">尾部默认值</slot>
 </div>
 `,
};


var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p slot="my-header">我是头部</p>
  <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

永利开户送38元体验金 17

自始至终能够有1个无名氏 slot,它是默认
slot
,作为找不到相当的内容片段的备用插槽。无名氏slot只可以看做未有slot属性的要素的插槽,有slot属性的要素假设未有布署slot,则会被撇下

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-body">主体默认值</slot>
 <slot></slot>
 </div>
 `,
};


var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p slot="my-body">我是主体</p>
  <p>我是其他内容</p>
  <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

<p slot=”my-body”>插入<slot
name=”my-body”>中,<p>小编是其余剧情</p>插入<slot>中,而<p
slot=”my-footer”>被扬弃

永利开户送38元体验金 18

假诺未有暗中同意的 slot,这几个找不到非常的原委片段也将被撇下

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-body">主体默认值</slot>
 </div>
 `,
};


var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p slot="my-body">我是主体</p>
  <p>我是其他内容</p>
  <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

<p>小编是其余内容</p>和<p slot=”my-footer”>都被丢掉

永利开户送38元体验金 19

功效域插槽

效用域插槽是一种卓殊类别的插槽,用作使用贰个 (可以传递数据到)
可选用模板替换已渲染成分。

在子组件中,只需将数据传递到插槽,就像将 props 传递给组件相同

<div class="child">
 <slot text="hello from child"></slot>
</div>

在父级中,具备特别性质 scope 的 <template>
成分必须存在,表示它是成效域插槽的沙盘。scope
的值对应多少个一时半刻变量名,此变量接收从子组件中传递的 props 对象

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
  <slot xxx="hello from child"></slot>
 </div>
 `,
};
var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <template scope="props">
  <p>hello from parent</p>
  <p>{{ props.xxx }}</p>
  </template>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

即便渲染以上结果,获得的输出是

永利开户送38元体验金 20

【列表组件】

效能域插槽更具代表性的用例是列表组件,允许组件自定义应该怎样渲染列表每1项

var childNode = {
 template: `
 <ul>
 <slot name="item" v-for="item in items" :text="item.text">默认值</slot>
 </ul>
 `,
 data(){
 return{
  items:[
  {id:1,text:'第1段'},
  {id:2,text:'第2段'},
  {id:3,text:'第3段'},
  ]
 }
 }
};


var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <template slot="item" scope="props">
  <li>{{ props.text }}</li>
  </template>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

永利开户送38元体验金 21

以上这篇Vue内容分发slot(周全深入分析)便是我分享给大家的全体内容了,希望能给我们二个参考,也愿意大家多多帮助脚本之家。

你或然感兴趣的小说:

  • Vue组件中slot的用法
  • 深切通晓vue中slot与slot-scope的求实使用
  • 详解vue.js数据传递以及数额分发slot
  • Vue贰.0
    slot分发内容与props验证的主意
  • vue如何使用 Slot
    分发内容实例详解
  • vue
    Render中slots的选用的实例代码
  • 详解Vue学习笔记入门篇之组件的内容分发(slot)
  • Vue.js中组件中的slot实例详解
  • 详解vue
    slot插槽的利用办法
  • Vue.js之slot深度复制详解
  • Vue中的slot使用插槽分发内容的艺术

相关文章