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函数实现动态添加CSS样式表文件
Dec 15 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 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 设计模式之观察者模式介绍
2012/02/22 PHP
Laravel日志用法详解
2016/10/09 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
简单谈谈python中的Queue与多进程
2016/08/25 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
py-charm延长试用期限实例
2019/12/22 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
机械制造与自动化应届生求职信
2013/11/16 职场文书
大学生个人求职信
2014/06/02 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
2014年医院科室工作总结
2014/12/20 职场文书