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 事件绑定问题
Jan 01 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
Vue之封装公用变量以及实现方式
Jul 31 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动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
jQuery版Tab标签切换
2011/03/16 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
python 字典(dict)按键和值排序
2016/06/28 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
夜大毕业自我鉴定
2013/10/11 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
高二物理教学反思
2014/02/08 职场文书
幼儿教师研修感言
2014/02/12 职场文书
股东授权委托书范本
2014/09/13 职场文书
2014年评职称工作总结
2014/11/20 职场文书
教师个人考察材料
2014/12/16 职场文书
大学生暑假实习总结
2015/07/13 职场文书