Vue内容分发slot(全面解析)

前面的话

为了让组件可以组合，需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” )。Vue实现了一个内容分发 API，参照了当前 Web 组件规范草案，使用特殊的 <slot> 元素作为原始内容的插槽。本文将详细介绍Vue内容分发slot

编译作用域

在深入内容分发 API 之前，先明确内容在哪个作用域里编译。假定模板为

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

message 应该绑定到父组件的数据，还是绑定到子组件的数据？答案是父组件。组件作用域简单地说是：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法：

<!-- 无效 -->
<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>被丢弃

匿名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
 },
};

如果出现多于1个的匿名slot，vue将报错

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

【默认值】

最初在 <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
 },
};

当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
 },
};

具名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
 },
};

仍然可以有一个匿名 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">被丢弃

如果没有默认的 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">都被抛弃

作用域插槽

作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

在子组件中，只需将数据传递到插槽，就像将 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
 },
};

如果渲染以上结果，得到的输出是

【列表组件】

作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项

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
 },
};

以上这篇Vue内容分发slot(全面解析)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

# slot  # 内容分发  # 详解Vue一个案例引发「内容分发slot」的最全总结  # 玩转vue的slot内容分发  # 详解Vue学习笔记入门篇之组件的内容分发(slot)  # Vuejs第十一篇组件之slot内容分发实例详解  # Vue之自定义事件内容分发详解  # 我是  # 插槽  # 默认值  # 绑定  # 自己的  # 是在  # 找不到  # 它是  # 给大家  # 如果没有  # 是一种  # 就像  # 多个  # 将会  # 可以用  # 中有  # 只需  # 希望能  # 将被  # 自定义 

相关文章： 免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  佛山企业网站制作公司有哪些,沟通100网上服务官网？  定制建站方案优化指南：企业官网开发与建站费用解析  linux top下的 minerd 木马清除方法  已有域名如何免费搭建网站？  如何选择服务器才能高效搭建专属网站？  如何快速搭建高效WAP手机网站吸引移动用户？  php能控制zigbee模块吗_php通过串口与cc2530 zigbee通信【介绍】  攀枝花网站建设,攀枝花营业执照网上怎么年审？  如何在Golang中指定模块版本_使用go.mod控制版本号  网站制作新手教程,新手建设一个网站需要注意些什么？  简易网站制作视频教程,使用记事本编写一个简单的网页html文件？  网站设计制作公司地址,网站建设比较好的公司都有哪些？  如何快速上传建站程序避免常见错误？  建站之星如何实现网站加密操作？  如何自定义建站之星模板颜色并下载新样式？  太原网站制作公司有哪些,网约车营运证查询官网？  建站之星CMS五站合一模板配置与SEO优化指南  建站之星后台管理如何实现高效配置？  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  如何用AWS免费套餐快速搭建高效网站？  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  全景视频制作网站有哪些,全景图怎么做成网页？  大连网站制作费用,大连新青年网站，五年四班里的视频怎样下载啊？  盐城做公司网站,江苏电子版退休证办理流程？  如何通过主机屋免费建站教程十分钟搭建网站？  股票网站制作软件,网上股票怎么开户？  如何获取PHP WAP自助建站系统源码？  如何安全更换建站之星模板并保留数据？  山东网站制作公司有哪些,山东大源集团官网？  如何在云主机上快速搭建多站点网站？  如何选择PHP开源工具快速搭建网站？  C++ static_cast和dynamic_cast区别_C++静态转换与动态类型安全转换  建站168自助建站系统：快速模板定制与SEO优化指南  如何在宝塔面板中修改默认建站目录？  建站主机数据库如何配置才能提升网站性能？  岳西云建站教程与模板下载_一站式快速建站系统操作指南  如何彻底删除建站之星生成的Banner？  如何有效防御Web建站篡改攻击？  广平建站公司哪家专业可靠？如何选择？  简单实现Android文件上传  如何在建站之星网店版论坛获取技术支持？  建站之星安装后界面空白如何解决？  广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网？  定制建站哪家更专业可靠？推荐榜单揭晓  建站主机是什么？如何选择适合的建站主机？  青浦网站制作公司有哪些,苹果官网发货地是哪里？  高防服务器如何保障网站安全无虞？  ,柠檬视频怎样兑换vip？  太平洋网站制作公司,网络用语太平洋是什么意思？