vue使用插槽slot整理

插槽

• 插槽相当于一个占位符，当没有内容传递过去的时候会显示插槽的内容，有内容时不会显示插槽的内容

作用域插槽

• 子组件的插槽传递数据给父组件

• 父组件 v-slot:default = <插槽数据的变量名> 这个自定义的变量名实际是通过一个参数传递到函数中，可以通过解构来简化语法： v-slot:default = "{插槽数据的对象名}" 

• 子组件 <slot :插槽数据的变量名=<要传递的数据变量名></slot>

具名插槽

• 一个组件中可以使用多个插槽,为了区分每一个插槽可以通过name属性设置名字

• 在父组件中使用具名插槽时，把要插入的内容放置在template节点

• 使用v-slot:<插槽的name值> 绑定插槽

• v-slot语法糖：#

• 在子组件既有具名插槽又有默认插槽时，如果父组件不使用v-slot绑定插槽，会把所有的内容都插入在默认插槽

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld>
      <!-- 作用域插槽：子组件的插槽传递数据给父组件 
       父组件 v-slot:default = <插槽数据的变量名>,这个自定义的变量名实际是通过一个参数传递到函数中，可以通过解构来简化语法： v-slot:default = "{插槽数据的对象名}" -->
      <template v-slot:default="{userInfo}">
        {{userInfo.name + '-' + userInfo.age}}
      </template>
      <!-- 具名插槽
      在父组件中使用具名插槽时，把要插入的内容放置在template节点
      使用v-slot:<插槽的name值> 绑定插槽
      v-slot语法糖：# -->
      <template #h3="{h3Msg}">
        {{h3Msg}}
      </template>
    </HelloWorld>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
}
</script>

 <template>
  <div class="hello">
    <h1>
      <!-- 插槽
      插槽相当于一个占位符，当没有内容传递过去的时候会显示插槽的内容，有内容时不会显示插槽的内容 -->
      <slot :userInfo="userInfo">{{ msg }}</slot>
    </h1>
    <h3>
      <!-- 具名插槽
      一个组件中可以使用多个插槽,为了区分每一个插槽可以通过`name`属性设置名字
      在子组件既有具名插槽又有默认插槽时，如果父组件不使用v-slot绑定插槽，会把所有的内容都插入在默认插槽 -->
      <slot name="h3" :h3Msg="h3Msg"></slot>
    </h3>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'default msg',
      userInfo: {
        name: 'Lily',
        age: 23
      },
      h3Msg: "h3 msg"
    }
  }
}
</script>