详解Vue.js分发之作用域槽


Posted in Javascript onJune 13, 2017

首先,需要知道的是,每个组件有每个组件自己的作用域。每个组件都是Vue()的实例,有自己的作用域。

比如现在有个组件这样的:

Vue.component('father-component1',{
  template:'<div class="father"><p>Hi,我是父组件</p>{{fatherMessage}}</div>',
  data:function(){
   return {
     fatherMessage:'这是父组件发出的消息哦~'
   }
  },
});

这个data只为template里的模板服务。同样的,子组件的data只为子组件的模板服务。因为他们都是各自作用域内的属性。

在slot分发中,无论是单分发还是具名分发,都是父组件替换子组件的数据,或者没有替换,用子组件默认的数据。两者并不能共存。这样他们就没有数据联系了。

但是通过设置作用域槽,就可以改变这种状况,让子组件可以在父组件进行分发时获取自己的数据,至于是什么数据,由子组件决定,这样就能解耦了。

作用域槽通过slot的一个自定义的属性,官方给出的DEMO是text,但也可以是其他,值为暴露的数据。

这个自定义属性已经存放在子组件的prop对象里了。等待着被父组件获取。

怎么获取呢?

在父组件的模板里,使用一个Vue自带的特殊组件<template> ,并在该组件上使用scope属性,值是一个临时的变量,存着的是由子组件传过来的prop对象,在下面的例子中我把他命名为props。

获得由子传过来的prop对象。这时候,父组件就可以访问子组件在自定义属性上暴露的数据了。

//js
Vue.component('child-component4',{
  template:'<ul>' +
  '<slot name="child-ul" v-for="item in fruit" v-bind:text="item.name">?</slot>' +
  '</ul>',
  data:function(){
   return {
     fruit:[
       {name:'苹果'},
       {name:'香蕉'},
       {name:'橙子'}
     ]
   }
  },
});
Vue.component('father-component4',{
  template:'<child-component4>' +
  '<template scope="props" slot="child-ul">' +
  '<li class="child-li" >{{props.text}}</li>' +
  '</template>' +
  '</child-component4>'
});
var app16 = new Vue({
  el:'#app16'
});
<div id="app16">
  <father-component4></father-component4>
</div>

以上的的组件组合会被渲染为:

<div id="app16">
<ul>
  <li class="child-li">苹果</li>
  <li class="child-li">香蕉</li>
  <li class="child-li">橙子</li>
</ul>
</div>

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

Javascript 相关文章推荐
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 #Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 #Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 #Javascript
微信小程序动态显示项目倒计时效果
Jun 13 #Javascript
深究AngularJS之ui-router详解
Jun 13 #Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 #Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 #Javascript
You might like
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
JavaScript日历实现代码
2010/09/12 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
Python psutil模块简单使用实例
2015/04/28 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Python使用folium excel绘制point
2019/01/03 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
奖励通知
2015/04/22 职场文书
社团招新宣传语
2015/07/13 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
编写python程序的90条建议
2021/04/14 Python
总结Python常用的魔法方法
2021/05/25 Python