Vuejs第十一篇组件之slot内容分发实例详解


Posted in Javascript onSeptember 09, 2016

什么是组件?

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

Slot分发内容

①概述:

简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责的活。

②默认情况下

父组件在子组件内套的内容,是不显示的。

例如代码:

<div id="app"> 
<children> 
<span>12345</span> 
<!--上面这行不会显示--> 
</children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
components: { 
children: { //这个无返回值,不会继续派发 
template: "<button>为了明确作用范围,所以使用button标签</button>" 
} 
} 
}); 
</script>

显示内容是一个button按钮,不包含span标签里面的内容;

③单个slot

简单来说,只使用这个标签的话,可以将父组件放在子组件的内容,放到想让他显示的地方。

<div id="app"> 
<children> 
<span>12345</span> 
<!--上面这行不会显示--> 
</children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
components: { 
children: { //这个无返回值,不会继续派发 
template: "<button><slot></slot>为了明确作用范围,所以使用button标签</button>" 
} 
} 
}); 
</script>

例如这样写的话,结果是:

<button><span>12345</span>为了明确作用范围,所以使用button标签</button>

即父组件放在子组件里的内容,插到了子组件的<slot></slot>位置;

注意,即使有多个标签,会一起被插入,相当于用父组件放在子组件里的标签,替换了<slot></slot>这个标签。

④具名slot

将放在子组件里的不同html标签放在不同的位置

父组件在要分发的标签里添加 slot=”name名” 属性

子组件在对应分发的位置的slot标签里,添加name=”name名” 属性,然后就会将对应的标签放在对应的位置了。

示例代码:

<div id="app"> 
<children> 
<span slot="first">12345</span> 
<span slot="second">56789</span> 
<!--上面这行不会显示--> 
</children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
components: { 
children: { //这个无返回值,不会继续派发 
template: "<button><slot name='first'></slot>为了明确作用范围,<slot name='second'></slot>所以使用button标签</button>" 
} 
} 
}); 
</script>

显示结果为:(为了方便查看,已手动调整换行)

<button>
<span slot="first">12345</span>
为了明确作用范围,
<span slot="second">56789</span>
所以使用button标签
</button>

⑤分发内容的作用域:

被分发的内容的作用域,根据其所在模板决定,例如,以上标签,其在父组件的模板中(虽然其被子组件的children标签所包括,但由于他不在子组件的template属性中,因此不属于子组件),则受父组件所控制。

示例代码:

<div id="app"> 
<children> 
<span slot="first" @click="tobeknow">12345</span> 
<span slot="second">56789</span> 
<!--上面这行不会显示--> 
</children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
methods: { 
tobeknow: function () { 
console.log("It is the parent's method"); 
} 
}, 
components: { 
children: { //这个无返回值,不会继续派发 
template: "<button><slot name='first'></slot>为了明确作用范围,<slot name='second'></slot>所以使用button标签</button>" 
} 
} 
}); 
</script>

当点击文字12345的区域时(而不是按钮全部),会触发父组件的tobeknow方法。

但是点击其他区域时则没有影响。

官方教程是这么说的:

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

⑥当没有分发内容时的提示:

假如父组件没有在子组件中放置有标签,或者是父组件在子组件中放置标签,但有slot属性,而子组件中没有该slot属性的标签。

那么,子组件的slot标签,将不会起到任何作用。

除非,该slot标签内有内容,那么在无分发内容的时候,会显示该slot标签内的内容。

如示例代码:

<div id="app"> 
<children> 
<span slot="first">【12345】</span> 
<!--上面这行不会显示--> 
</children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
components: { 
children: { //这个无返回值,不会继续派发 
template: "<div><slot name='first'><button>【如果没有内容则显示我1】</button></slot>为了明确作用范围,<slot name='last'><button>【如果没有内容则显示我2】</button></slot>所以使用button标签</div>" 
} 
} 
}); 
</script>

说明:

【1】name='first'的slot标签被父组件对应的标签所替换(slot标签内部的内容被舍弃);

【2】name='last'的slot标签,因为没有对应的内容,则显示该slot标签内部的内容。

⑦假如想控制子组件根标签的属性

【1】首先,由于模板标签是属于父组件的,因此,将子组件的指令绑定在模板标签里,是不可以的(因为他归属于父组件);

【2】假如需要通过父组件控制子组件是否显示(例如v-if或者v-show),那么这个指令显然是属于父组件的(例如放在父组件的data下面)。可以将标签写在子组件的模板上。

如代码:

<div id="app"> 
<button @click="toshow">点击让子组件显示</button> 
<children v-if="abc"> 
</children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
abc: false 
}, 
methods: { 
toshow: function () { 
this.abc = !this.abc; 
} 
}, 
components: { 
children: { //这个无返回值,不会继续派发 
template: "<div>这里是子组件</div>" 
} 
} 
}); 
</script>

说明:

通过父组件(点击按钮,切换v-if指令的值)控制子组件是否显示。

【3】假如需要通过子组件,控制子组件是否显示(比如让他隐藏),那么这个指令显然是属于子组件的(会将值放在子组件的data属性下),那么就不能像上面这么写,而是必须放置在子组件的根标签中。

<div id="app"> 
<button @click="toshow">点击让子组件显示</button> 
<children> 
<span slot="first">【12345】</span> 
<!--上面这行不会显示--> 
</children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
methods: { 
toshow: function () { 
this.$children[0].tohidden = true; 
} 
}, 
components: { 
children: { //这个无返回值,不会继续派发 
template: "<div v-if='tohidden' @click='tohide'>这里是子组件</div>", 
data: function () { 
return { 
tohidden: true 
} 
}, 
methods: { 
tohide: function () { 
this.tohidden = !this.tohidden; 
} 
} 
} 
} 
}); 
</script>

说明:

点击子组件会让子组件消失;

点击父组件的按钮,通过更改子组件的tohidden属性,让子组件重新显示。

子组件的指令绑定在子组件的模板之中(如此才能调用);

以上所述是小编给大家介绍的Vuejs第十一篇组件之slot内容分发实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript类继承机制的原理分析
Sep 12 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
jQuery内容过滤选择器用法示例
Sep 09 #Javascript
Vue.js动态组件解析
Sep 09 #Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 #Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 #Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 #Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 #Javascript
jQuery简单创建节点的方法
Sep 09 #Javascript
You might like
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
PHP防盗链代码实例
2014/08/27 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
js+html获取系统当前时间
2017/11/10 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
Python爬取网页信息的示例
2020/09/24 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
物理研修随笔感言
2014/02/14 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
2014年减负工作总结
2014/12/10 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python