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 相关文章推荐
js一组验证函数
Dec 20 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
JavaScript实现世界各地时间显示
Sep 07 Javascript
微信小程序自定义胶囊样式
Dec 27 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/09/05 PHP
第十三节 对象串行化 [13]
2006/10/09 PHP
php框架Phpbean说明
2008/01/10 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
详解JavaScript中的坐标和距离
2019/05/27 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python操作串口的方法
2015/06/17 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
数组越界问题
2015/10/21 面试题
大四学年自我鉴定
2013/11/13 职场文书
借款协议书
2014/09/16 职场文书
五一劳动节慰问信
2015/02/14 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
工地食品安全责任书
2015/05/09 职场文书
党员发展大会主持词
2015/07/03 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis