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跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
详解原生js实现offset方法
Jun 15 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
微信小程序实现轮播图指示器
Jun 25 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
PHP新手上路(十二)
2006/10/09 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP类的反射用法实例
2014/11/03 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JavaScript File分段上传
2016/03/10 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
基于Python os模块常用命令介绍
2017/11/03 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
学校宣传标语
2014/06/18 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python