Vue匿名插槽与作用域插槽的合并和覆盖行为


Posted in Javascript onApril 22, 2019

Vue 测试版本:Vue.js v2.5.13

Vue 文档:

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

仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽。

具体应用的时候:

1、匿名插槽的合并行为:

<div id="app">
    <myele>
      <div>
        default slot
      </div>
      <div>
        <div>from parent!</div>
        <div>from parent!</div>
      </div>
    </myele>
  </div>
window.onload = function() {
  Vue.component('myele', {
    template: `         
     <div>
     <slot></slot>
     </div>
    `
  }); 
  new Vue({
    el: '#app'
  });
};

效果:内容合并

Vue匿名插槽与作用域插槽的合并和覆盖行为

2、匿名作用域插槽的覆盖行为:

<div id="app">
    <myele>
      <div slot-scope="props">
        <div>from parent!</div>
        <div>from {{props.text}}</div>
      </div>
      <div slot-scope="prop">
        <div>from </div>
        <div>{{prop.text}}</div>
      </div>    
    </myele>
  </div>
window.onload = function() {
  Vue.component('myele', {
    template: `         
     <div>     
     <slot text="child"></slot>
     <slot text="child2"></slot>
//即使 text 和上一行一样,也不会报错,开发环境     </div>
    `
  }); 
  new Vue({
    el: '#app'
  });
};

效果:以靠后的作用域插槽模板为准,绘制了两遍;

Vue匿名插槽与作用域插槽的合并和覆盖行为

3、匿名插槽模板和作用域插槽模板混合:

<div id="app">
    <myele>
      <div>
        default slot
      </div>      
      <div slot-scope="props">
        <div>from parent!</div>
        <div>from {{props.text}}</div>
      </div>
    </myele>
  </div>
window.onload = function() {
  Vue.component('myele', {
    template: `         
     <div>     
     <slot></slot>
     <slot text="child"></slot>
     </div>
    `
  }); 
  new Vue({
    el: '#app'
  });
};

效果:匿名插槽以匿名作用域插槽模板为准进行渲染,即使你把匿名插槽模板放后面,也是一样的结果;

Vue匿名插槽与作用域插槽的合并和覆盖行为

由此可以看出,最好不要使用匿名、默认插槽,最好使用具名插槽,可以减少不确定性;

参考文档:

https://cn.vuejs.org/v2/guide/components.html#具名插槽

总结

以上所述是小编给大家介绍的Vue匿名插槽与作用域插槽的合并和覆盖行为,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 #Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 #Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 #Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 #Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 #Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 #Javascript
详解Vue中使用Axios拦截器
Apr 22 #Javascript
You might like
十天学会php之第三天
2006/10/09 PHP
php学习之流程控制实现代码
2011/06/09 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
用ADODB.Stream转换
2007/01/22 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
python删除不需要的python文件方法
2018/04/24 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python 画函数曲线示例
2019/12/04 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
新郎婚宴答谢词
2014/01/19 职场文书
教师专业自荐书范文
2014/02/10 职场文书
利群广告词
2014/03/20 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
小学英语课后反思
2014/04/26 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
学校工会工作总结2015
2015/05/19 职场文书
学生会自荐信
2019/05/16 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL