详解Vue学习笔记入门篇之组件的内容分发(slot)


Posted in Javascript onJuly 17, 2017

介绍

为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽。

编译作用域

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

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

message 应该绑定到父组件的数据,还是绑定到子组件的数据?答案是父组件。组件作用域简单地说是:

  1. 父组件模板的内容在父组件作用域内编译;
  2. 子组件模板的内容在子组件作用域内编译。

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

<!-- 无效 -->
<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

除非子组件模板包含至少一个 'slot' 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。

最初在 'slot' 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。

示例代码:

<div id="app">
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>初始内容1</p>
    <p>初始内容2</p>
  </my-component>
</div>
Vue.component('my-component',{
  template:`
  <div>
    <h2>我是子组件的标题</h2>
    <slot>
      只有在没有要分发的内容是才出现。
    </slot>
  <div>
`,
})
new Vue({
  el:'#app'
})

运行结果如下:

详解Vue学习笔记入门篇之组件的内容分发(slot)

将html部分代码修改为以下代码:

<div id="app">
  <h1>我是父组件的标题</h1>
  <my-component>
  </my-component>
</div>

则运行结果如下:

详解Vue学习笔记入门篇之组件的内容分发(slot)

具名slot

'slot' 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名 slot,它是默认 slot,作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot,这些找不到匹配的内容片段将被抛弃。

如以下例子:

<div id="app">
  <my-component>
    <h1 slot="header">这是标题</h1>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p slot="footer">联系信息</p>
  </my-component>
</div>
Vue.component('my-component',{
  template:`
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  <div>
`,
})
new Vue({
  el:'#app'
})

运行结果如下:

详解Vue学习笔记入门篇之组件的内容分发(slot)

在组合组件时,内容分发 API 是非常有用的机制。

作用域插槽

2.1.0新增

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

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

示例代码:

<div id="app">
  <my-component>
    <template scope="props">
      <p>hello from parent</p>
      <p>{{props.text}}</p>
    </template>
  </my-component>
</div>
Vue.component('my-component',{
  template:`
  <div class="child">
    <slot text="hello from child"></slot>
  <div>
`,
  props:['text']
})
new Vue({
  el:'#app'
})

运行结果:

详解Vue学习笔记入门篇之组件的内容分发(slot)

在父级中,具有特殊属性 scope 的 <'template'> 元素必须存在,表示它是作用域插槽的模板。scope 的值对应一个临时变量名,此变量接收从子组件中传递的 props 对象。

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

<div id="app">
  <my-component :items="items">
    <template slot="item" scope="props">
      <li>{{props.text}}</li>
    </template>
  </my-component>
</div>
Vue.component('my-component',{
  template:`
  <ul>
    <slot name="item" v-for="item in items" :text="item.text"></slot>
  </ul>
`,
  props:['text','items']
})
new Vue({
  el:'#app',
  data:{
    items:[
      {text:'item1'},
      {text:'item2'},
      {text:'item3'},
    ]
  }
})

作用域插槽也可以是具名的

运行结果:

详解Vue学习笔记入门篇之组件的内容分发(slot)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
js注册时输入合法性验证方法
Oct 21 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 #Javascript
js学使用setTimeout实现轮循动画
Jul 17 #Javascript
详解Vue2.x-directive的学习笔记
Jul 17 #Javascript
javascript  数组排序与对象排序的实例
Jul 17 #Javascript
jQuery常用选择器详解
Jul 17 #jQuery
js轮播图的插件化封装详解
Jul 17 #Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 #Javascript
You might like
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
Python探索之创建二叉树
2017/10/25 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
Python之用户输入的实例
2018/06/22 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
python程序输出无内容的解决方式
2020/04/09 Python
Python3开发环境搭建详细教程
2020/06/18 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
可靠的数据流传输TCP
2016/03/15 面试题
对公司合理化的建议书
2014/03/12 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
初婚未育证明样本
2015/06/18 职场文书
高中政治教师教学反思
2016/02/23 职场文书
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技