vue中的插槽

插槽用大白话讲就是：在子组件中用slot标签占个位置，然后在父组件中，子组件标签里嵌套一个标签，然后执行的时候用嵌套的标签替代slot

子组件:组件MySon定义了一个默认插槽，用slot标签表示。当父组件使用MySon时，可以在其标签内放置任意内容，该内容将会替换掉slot标签。

 1 <template>
 2   <div class="my-son">
 3     <h3>{{ title }}</h3>
 4     <slot></slot>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10   name: 'MySon',
11   props:[
12     title: String,
13   ]
14 }
15 </script>

父组件:使用p标签去把子组件的slot标签替换掉，这就是最简单的默认插槽

 1 <template>
 2   <div>
 3     <my-son title="Hello World">
 4       <p>This is the content of MySon component.</p>
 5     </my-son>
 6   </div>
 7 </template>
 8 
 9 <script>
10 import MyCard from './MySon.vue'
11 
12 export default {
13   components: { MySon }
14 }
15 </script>

具名插槽

然后接下来就是比默认插槽复杂一点的具名插槽，顾名思义就是有名字的插槽，当我们写了多个插槽时就需要名字来区分了

子组件：这里看子组件就比默认插槽的slot多了一个name属性，而name属性的内容就是插槽的名子

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <p>{{ description }}</p>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  name: 'MyCard',
  props: {
    title: String,
    description: String
  }
}
</script>

父组件：相比较父组件就要复杂点，先看第4行代码，这里它用template标签包裹，而我们要知道在Vue中，template标签本身不会被渲染到HTML页面中的。

然后就是v-slot可以理解是用来指定替代哪个插槽的，这里第四行v-slot:content，就是说要替代名字为content的插槽，而v-slot:是可以简写为#的

比如v-slot:content简写#content

这里有一个点要思考就是第8行的代码为什么执行的回调函数onClick，要写在父组件中，而不是写在子组件中的，我认为写在父组件中可以使得代码容易阅读，希望vue开发者也是这麽想的哈哈

有知道的可以提出来欢迎指正

 1 <template>
 2   <div>
 3     <my-card title="Hello">
 4       <template v-slot:content>
 5         <p>This is the content of MyCard component.</p>
 6       </template>
 7       <template v-slot:footer>
 8         <button @click="onClick">Click me</button>
 9       </template>
10     </my-card>
11   </div>
12 </template>
13 
14 <script>
15 import MyCard from './MyCard.vue'
16 
17 export default {
18   components: { MyCard },
19   methods: {
20     onClick () {
21       console.log('Button clicked')
22     }
23   }
24 }
25 </script>

接下来就是作用域插槽，作用域插槽子组件向父组件传递数据的一种机制

子组件：

<template>
  <div>
    <h1>{{title}}</h1>
    <!-- 使用slot标签占位 -->
    <!-- slot标签内写属性可以给父组件传值 -->
    <slot name="test" :iii="abc"></slot>
  </div>
</template>

<script>
  export default {
    name:'Test',
    data () {
      return {
        title:'hello world',
        abc:12321
      }
    }
  }
</script>

父组件：

<template>
  <div>
    <Test>
      <!-- 使用='props' 这样props可以接收到子组件在插槽中传过来的值 这里props名字不是固定的，可以写成a,b,c都行-->
        <template  #test="props" >
          <h2>{{props.iii}}</h2>
        </template>
    </Test>
  </div>
</template>

<script>
import Test from './components/Test.vue';
  export default {
    name:'App',
    components: {
      Test
    }
  }