slot属性值_Vue入门之slot属性

一开始接触学习slot，比较浅显，以为只是个占位符而已。看了官方文档，好吧，没看明白，翻到了一篇博客，讲的很细，跟着敲了代码，总结下，对了，博客的网址是https://blog.csdn.net/sinat_17775997/article/details/52484072

1.slot是干啥的？

假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

2.在父组件中，子组件标签里内套的内容，是不显示的。

//子组件

我是子组件

//父组件

//hello不显示

hello

以上hello是不显示的，只会显示我是子组件

3.使用slot标签，就可以将父组件放在子组件标签里的内容，放到想让他显示的地方。

//子组件

我是子组件

//加了个slot标签，在父组件中，就可以让子组件标签内的内容显示啦

//父组件

//hello显示

hello

就相当于子组件标签里的内容，插到了子组件中的位置；

即使有多个标签，会一起被插入，相当于用父组件放在子组件里的标签，替换了这个标签。

4.具名slot

将放在子组件里的不同html标签放在不同的位置

子组件在对应分发的位置的slot标签里，添加内容属性，

父组件在要显示的标签里添加 slot='name名'属性，比如要在p标签中显示子组件对应的dom，

然后就会将对应的标签放在对应的位置了。该slot标签没有内容，会显示子组件中该slot标签内的内容。

//子组件

我是子组件

父组件中没header的时候会显示

父组件中没footer的时候会显示

//父组件

hello

header

显示结果：

我是子组件

header

父组件中没footer的时候会显示

5.分发内容的作用域

被分发的内容的作用域，根据其所在模板决定，例如，v-child标签里的东西，其在父组件的模板中(虽然其被子组件的v-child标签所包括，但由于他不在子组件的template属性中，因此不属于子组件)，则受父组件所控制。

举个栗子：在父组件中定义一个方法，在子组件中写个按钮，按钮包裹slot标签

//子组件

我是子组件

父组件中没header的时候会显示

父组件中没footer的时候会显示

//父组件

hello

header

footer

import child from './components/child.vue'

export default {

data () {

return {

child_data: ''

}

},

components: {

'v-child': child

},

methods: {

clickBtn () {

console.log('Hello')

}

}

}

结果：

5.分发内容的作用域

当点击文字header的区域时(而不是按钮全部)，会触发父组件的clickBtn方法,但是点击其他区域时则没有影响。

是由于header是由子组件中的slot替换的，作用域数据父组件中的

官网文档这样说：

6.没有分发时内容的提示

如果父组件与自组件有对应的name。

那么父组件优先，xx,xx不会显示

如果没有对应的name

那么子组件内的xxx,xxx 将会被展开，标签被删除。栗子在第4条的例子里面可以体现

7.父组件控制子组件内部的方法

【1】首先，由于模板标签是属于父组件的，因此，将子组件的指令绑定在模板标签里，是不可以的(因为他归属于父组件)；

【2】假如需要通过父组件控制子组件是否显示(例如v-if或者v-show)，那么这个指令显然是属于父组件的(例如放在父组件的data下面)。可以将标签写在子组件的模板上。

举个栗子：

//子组件

我是子组件

//父组件

点击显示子组件

import child from './components/child.vue'

export default {

data () {

return {

show: false

}

},

components: {

'v-child': child

},

methods: {

showChild () {

this.show = !this.show

}

}

}

结果：

7.1父组件控制子组件内部的方法

通过父组件(点击按钮，切换v-if指令的值)控制子组件是否显示是可以的。

【3】假如需要通过子组件，控制子组件是否显示(比如让他隐藏)，那么这个指令显然是属于子组件的(会将值放在子组件的data属性下)，那么就不能像上面这么写，而是必须放置在子组件的根标签中。