Vue中slot插槽的用法

1.具名插槽，通过插槽名称选择要插入的具体位置

2.作用域插槽，通过插槽接收子组件传过来的值

        app.vue引入组件Slotvue

<template>
  <div class="app">
    <h2>插槽的用法</h2>
    <SlotVue>
      <!-- 通过具名插槽选择要插入的位置 v-slot:插槽名称 -->
      <template v-slot:Left>
        <p>左边内容</p>
      </template>
      <!-- v-slot:语法的简写 #插槽名称 -->
      <template #Content>
        <p>标题内容</p>
      </template>

      <!-- 作用域插槽的基本用法和解构赋值 -->
      <!-- ##Right=变量名接收作用域的值  scope为一个对象属性-->
      <!-- <template #Right="scope">
        <p>右边内容</p>
        <p>{{ scope.msg }}</p>
      </template> -->
      <!-- 作用域解构赋值 -->
      <template #Right="{ msg, userinfo }">
        <p>右边内容</p>
        <p>{{ msg }}</p>
        <p>{{ userinfo.name }}</p>
      </template>
    </SlotVue>
    <hr />
  </div>
</template>

<script>
import SlotVue from "./components/SlotVue.vue";

export default {
  name: "App",
  components: {
    SlotVue,
  },
  data() {
    return {};
  },
  
};
</script>

<style></style>

        Slotvue.vue

<template>
  <div class="myslot">
    <div class="left">
        <!-- slot没有给name值，默认为default name="default" -->
      <slot name="Left"></slot>
    </div>
    <div class="content">
      <slot name="Content"></slot>
    </div>
    <div class="right">
        
      <slot name="Right" :msg="msg" :useronfo="userinfo"></slot>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
    data () {
        return { 
            msg:'插槽作用域的使用',
            userinfo:{
                name:"xx",
                age:22
            }
        }
    },
    methods: {},
}
</script>

<style scoped>
</style>