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 相关文章推荐
JS面向对象编程 for Cookie
Sep 19 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
js 走马灯简单实例
Nov 21 Javascript
Vue.js快速入门教程
Sep 07 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
php session的锁和并发
2016/01/22 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
python中sleep函数用法实例分析
2015/04/29 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
python 命名规范知识点汇总
2020/02/14 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
函授毕业生的自我鉴定
2013/11/26 职场文书
银行职员思想汇报
2013/12/31 职场文书
教师党员整改措施
2014/10/24 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
矛盾论读书笔记
2015/06/29 职场文书
公司出差管理制度范本
2015/08/05 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang
Python中字符串对象语法分享
2022/02/24 Python