企业网站建设的内容,用户界面设计的重要性,北京到广州飞机,页面访问界面紧急升级通知2019独角兽企业重金招聘Python工程师标准 ①概述#xff1a; 简单来说#xff0c;假如父组件需要在子组件内放一些DOM#xff0c;那么这些DOM是显示、不显示、在哪个地方显示、如何显示#xff0c;就是slot分发负责的活。 ②默认情况下 父组件在子组件内套的… 2019独角兽企业重金招聘Python工程师标准 ①概述 简单来说假如父组件需要在子组件内放一些DOM那么这些DOM是显示、不显示、在哪个地方显示、如何显示就是slot分发负责的活。 ②默认情况下 父组件在子组件内套的内容是不显示的。 例如代码 div idapp children span12345/span !--上面这行不会显示-- /children
/div
script var vm new Vue({ el: #app, components: { children: { //这个无返回值不会继续派发 template: button为了明确作用范围所以使用button标签/button } } });
/script 显示内容是一个button按钮不包含span标签里面的内容 ③单个slot 简单来说只使用这个标签的话可以将父组件放在子组件的内容放到想让他显示的地方。 div idapp children span12345/span !--上面这行不会显示-- /children
/div
script var vm new Vue({ el: #app, components: { children: { //这个无返回值不会继续派发 template: buttonslot/slot为了明确作用范围所以使用button标签/button } } });
/script 例如这样写的话结果是 buttonspan12345/span为了明确作用范围所以使用button标签/button 即父组件放在子组件里的内容插到了子组件的slot/slot位置 注意即使有多个标签会一起被插入相当于用父组件放在子组件里的标签替换了slot/slot这个标签。 ④具名slot 将放在子组件里的不同html标签放在不同的位置 父组件在要分发的标签里添加 slot”name名” 属性 子组件在对应分发的位置的slot标签里添加name”name名” 属性 然后就会将对应的标签放在对应的位置了。 示例代码 div idapp children span slotfirst12345/span span slotsecond56789/span !--上面这行不会显示-- /children
/div
script var vm new Vue({ el: #app, components: { children: { //这个无返回值不会继续派发 template: buttonslot namefirst/slot为了明确作用范围slot namesecond/slot所以使用button标签/button } } });
/script 显示结果为为了方便查看已手动调整换行 buttonspan slotfirst12345/span为了明确作用范围span slotsecond56789/span所以使用button标签/button ⑤分发内容的作用域 被分发的内容的作用域根据其所在模板决定例如以上标签其在父组件的模板中虽然其被子组件的children标签所包括但由于他不在子组件的template属性中因此不属于子组件则受父组件所控制。 示例代码 div idapp children span slotfirst clicktobeknow12345/span span slotsecond56789/span !--上面这行不会显示-- /children
/div
script var vm new Vue({ el: #app, methods: { tobeknow: function () { console.log(It is the parents method); } }, components: { children: { //这个无返回值不会继续派发 template: buttonslot namefirst/slot为了明确作用范围slot namesecond/slot所以使用button标签/button } } });
/script 当点击文字12345的区域时而不是按钮全部会触发父组件的tobeknow方法。 但是点击其他区域时则没有影响。 官方教程是这么说的 父组件模板的内容在父组件作用域内编译子组件模板的内容在子组件作用域内编译 ⑥当没有分发内容时的提示 假如父组件没有在子组件中放置有标签或者是父组件在子组件中放置标签但有slot属性而子组件中没有该slot属性的标签。 那么子组件的slot标签将不会起到任何作用。 除非该slot标签内有内容那么在无分发内容的时候会显示该slot标签内的内容。 如示例代码 div idapp children span slotfirst【12345】/span !--上面这行不会显示-- /children
/div
script var vm new Vue({ el: #app, components: { children: { //这个无返回值不会继续派发 template: divslot namefirstbutton【如果没有内容则显示我1】/button/slot为了明确作用范围slot namelastbutton【如果没有内容则显示我2】/button/slot所以使用button标签/div } } });
/script 说明 【1】name’first’的slot标签被父组件对应的标签所替换slot标签内部的内容被舍弃 【2】name’last’的slot标签因为没有对应的内容则显示该slot标签内部的内容。 ⑦假如想控制子组件根标签的属性 【1】首先由于模板标签是属于父组件的因此将子组件的指令绑定在模板标签里是不可以的因为他归属于父组件 【2】假如需要通过父组件控制子组件是否显示例如v-if或者v-show那么这个指令显然是属于父组件的例如放在父组件的data下面。可以将标签写在子组件的模板上。 如代码 div idapp button clicktoshow点击让子组件显示/button children v-ifabc /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 idapp button clicktoshow点击让子组件显示/button children span slotfirst【12345】/span !--上面这行不会显示-- /children
/div
script var vm new Vue({ el: #app, methods: { toshow: function () { this.$children[0].tohidden true; } }, components: { children: { //这个无返回值不会继续派发 template: div v-iftohidden clicktohide这里是子组件/div, data: function () { return { tohidden: true } }, methods: { tohide: function () { this.tohidden !this.tohidden; } } } } });
/script 说明 点击子组件会让子组件消失 点击父组件的按钮通过更改子组件的tohidden属性让子组件重新显示。 子组件的指令绑定在子组件的模板之中如此才能调用 转载于:https://my.oschina.net/bluefrankey/blog/1928806
