Vue2入门之slot

1.slot是干啥的？

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

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

//子组件
<template>
    <div>
        <h3>我是子组件</h3>
    </div>
</template>

//父组件
<template>
  <div>
      //hello不显示
      <v-child>hello</v-child>
  </div>
</template>

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

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

//子组件
<template>
    <div>
        <h3>我是子组件</h3>
        <slot></slot>//加了个slot标签，在父组件中，就可以让子组件标签内的内容显示啦
    </div>
</template>

//父组件
<template>
  <div>
      //hello显示
      <v-child>hello</v-child>
  </div>
</template>

就相当于子组件标签里的内容，插到了子组件中的<slot></slot>位置；
即使有多个标签，会一起被插入，相当于用父组件放在子组件里的标签，替换了这个标签。

4.具名slot

将放在子组件里的不同html标签放在不同的位置
子组件在对应分发的位置的slot标签里，添加<slot name='name名' >内容</slot>属性，
父组件在要显示的标签里添加 slot='name名'属性，比如要在p标签中显示子组件对应的dom，<p slot='name名'></p>
然后就会将对应的标签放在对应的位置了。该slot标签没有内容，会显示子组件中该slot标签内的内容。

//子组件
<template>
    <div>
        <h3>我是子组件</h3>
        <p><slot name="header">父组件中没header的时候会显示</slot></p>
        <p><slot name="footer">父组件中没footer的时候会显示</slot></p>
    </div>
</template>

//父组件
<template>
  <div>
      <v-child>
          <p>hello</p>
          <h3 slot="header">header</h3>
      </v-child>
  </div>
</template>

显示结果：
我是子组件
header
父组件中没footer的时候会显示

5.分发内容的作用域

被分发的内容的作用域，根据其所在模板决定，例如，v-child标签里的东西，其在父组件的模板中（虽然其被子组件的v-child标签所包括，但由于他不在子组件的template属性中，因此不属于子组件），则受父组件所控制。
举个栗子：在父组件中定义一个方法，在子组件中写个按钮，按钮包裹slot标签

//子组件
<template>
    <div>
        <h3>我是子组件</h3>
        <button><slot name="header">父组件中没header的时候会显示</slot></button>
        <p><slot name="footer">父组件中没footer的时候会显示</slot></p>
    </div>
</template>

//父组件
<template>
  <div>
      <v-child>
          <p>hello</p>
          <h3 slot="header" @click="clickBtn">header</h3>
          <h3 slot="footer">footer</h3>
      </v-child>
  </div>
</template>
<script>
import child from './components/child.vue'
export default {
  data () {
    return {
      child_data: ''
    }
  },
  components: {
    'v-child': child
  },
  methods: {
    clickBtn () {
      console.log('Hello')
    }
  }
}
</script>

结果：

当点击文字header的区域时（而不是按钮全部），会触发父组件的clickBtn方法,但是点击其他区域时则没有影响。
是由于header是由子组件中的slot替换的，作用域数据父组件中的
官网文档这样说：
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译；

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

如果父组件与自组件有对应的name。
那么父组件优先，<slot>xx</slot>,xx不会显示
如果没有对应的name
那么子组件内的<slot>xxx</slot>,xxx 将会被展开，<slot>标签被删除。栗子在第4条的例子里面可以体现

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

【1】首先，由于模板标签是属于父组件的，因此，将子组件的指令绑定在模板标签里，是不可以的（因为他归属于父组件）；
【2】假如需要通过父组件控制子组件是否显示（例如v-if或者v-show），那么这个指令显然是属于父组件的（例如放在父组件的data下面）。可以将标签写在子组件的模板上。
举个栗子：

//子组件
<template>
    <div>
        <h3>我是子组件</h3>
    </div>
</template>

//父组件
<template>
  <div>
      <button @click="showChild">点击显示子组件</button>
      <v-child v-if="show"></v-child>
  </div>
</template>
<script>
import child from './components/child.vue'
export default {
  data () {
    return {
      show: false
    }
  },
  components: {
    'v-child': child
  },
  methods: {
    showChild () {
      this.show = !this.show
    }
  }
}
</script>

结果：

通过父组件（点击按钮，切换v-if指令的值）控制子组件是否显示是可以的。
【3】假如需要通过子组件，控制子组件是否显示（比如让他隐藏），那么这个指令显然是属于子组件的（会将值放在子组件的data属性下），那么就不能像上面这么写，而是必须放置在子组件的根标签中。

作用域插槽

就是用来传递数据的插槽

当你想在一个插槽中使用数据时，要注意一个问题作用域的问题，Vue 官方文档中说了父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的;

为了让 子组件中的数据 在父级的插槽 内容中可用我们可以将 数据 作为 元素的一个特性绑定上去： v-bind:text="text"

注意：

匿名的作用域插槽和具名的作用域插槽 区别在v-slot:defult="接受的名称"(defult(匿名的可以不写，具名的相反要写的是对应的name))
v-solt可以解构接收 解构接收的字段要和传的字段一样才可以 例如 :one 对应 v-slot="{one}"