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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
简单的网页广告特效实例
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
用header 发送cookie的php代码
2007/03/16 PHP
PHP 地址栏信息的获取代码
2009/01/07 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
PHP闭包实例解析
2014/09/08 PHP
php实现求相对时间函数
2015/06/15 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
使用javascript插入样式
2016/03/14 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
js实现随机点名小功能
2017/08/17 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
从头学Python之编写可执行的.py文件
2017/11/28 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
秘书英文求职信
2014/04/16 职场文书
班级口号大全
2014/06/09 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
nginx七层负载均衡配置详解
2022/07/15 Servers