版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wyk304443164/article/details/77836450
本文出自:
http://blog.csdn.net/wyk304443164
看了Vue两天了,记了不少笔记。基本都是稍微看了下,等项目的时候再搞吧。
下面开始
说实话官网比较难懂,在我一开始看的时候,很懵逼,然后看了这篇
http://blog.csdn.net/sinat_17775997/article/details/52484072
讲的真的很好。我都能看懂……(^ ^)
下面来点个人总结:
单个Slot
在children这个标签里面放Dom,Vue不会理你,也就是不会显示,类似React:this.props.children。
//父
<children>
<span>12345</span>//这边不会显示
</children>
//子
components: {
children: {
template: "<button>为了明确作用范围,所以使用button标签</button>"
}
}
你需要写成这样
children: {
template: "<button><slot></slot>为了明确作用范围,所以使用button标签</button>"
}
注意这边 slot 相当于一个坑,等着父组件给填上,这边 slot 代表的就是上面的 span
多个Slot
这边需要加name属性,说白了,多个Slot就不像上面单个,需要有个对应关系。
父-> slot="name1"
子-> <slot name="name1"
//父
<children>
<span slot="name1">12345</span>
</children>
//子
components: {
children: {
template: "<button>
<slot name="name1"></slot>
button标签
</button>"
}
}
这边写了一个name1,如果有多个,就插多个,比较简单。
作用域
<children>
<span slot="first" @click="tobeknow">
12345
</span>
<span slot="second">56789</span>
</children>
这边的@click=”tobeknow”的作用域是 父组件,也就是,不能访问自组件的方法
父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译
没有分发时内容的提示
如果父组件与自组件有对应的name。
那么父组件优先,<slot>xx</slot>,xx不会显示
如果没有对应的name
那么子组件内的<slot>xxx</slot>,xxx 将会被展开,<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标签内部的内容。
父组件控制子组件内部的方法
this.$children[0].tohidden = true;
<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>