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


Posted in Javascript onAugust 19, 2017

前面的话

为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “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>被丢弃

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

匿名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
 },
};
Vue内容分发slot(全面解析)

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

var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot></slot>
 <slot></slot>
 </div>
 `,
};
Vue内容分发slot(全面解析)

【默认值】

最初在 <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
 },
};
Vue内容分发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>
  <p>我是设置值</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};
Vue内容分发slot(全面解析)

具名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
 },
};
Vue内容分发slot(全面解析)

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

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

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

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

作用域插槽

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

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

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

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

【列表组件】

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

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(全面解析)

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

Javascript 相关文章推荐
js模拟点击事件实现代码
Nov 06 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
关于使用js算总价的问题
Jun 23 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
简单的网页广告特效实例
Aug 19 #Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 #Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 #Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 #Javascript
javascript将url解析为json格式的两种方法
Aug 18 #Javascript
Vue组件选项props实例详解
Aug 18 #Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 #Javascript
You might like
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
Python中列表元素转为数字的方法分析
2016/06/14 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
Python3 集合set入门基础
2020/02/10 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
学习Python爬虫的几点建议
2020/08/05 Python
用python发送微信消息
2020/12/21 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
单方离婚协议书范本2014
2014/10/28 职场文书
联欢会开场白
2015/06/01 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
千与千寻观后感
2015/06/04 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书