[JavaScript知识库]vue 插槽的使用

一:具名插槽

二:作用域插槽

一:具名插槽(2个以上)使用方法
父组件

<template>
  <div id="app">
    <h1>我是父组件</h1>
    <son>
      <!-- 多个插槽通过v-slot:"对应的名字找到对应的插槽" ,可以简写为 #名字 -->
      <template v-slot:one><h4>我是父组件插入的内容一</h4></template>
      <template #two><h4>我是父组件插入的内容二</h4></template>
    </son>
  </div>
</template>

<script>
import son from "./components/son.vue";
export default {
  components: {
    son,
  },
};
</script>

<style scoped>
</style>

子组件

<template>
  <div>
     <!-- 设置name 让父元素找到对应的插槽 -->
    <h1>我是son组件</h1>
    <slot name="one"><h4>我是插槽一默认显示内容</h4></slot>
    <slot name="two"><h4>我是插槽二默认显示内容</h4></slot>
  </div>
</template>

二:作用域插槽
结构使用父级传入的结构！内容使用子组件自己的内容
父元素

<template>
  <div id="app">
    <h1>我是父组件</h1>
    <son>
      <!-- 通过v-slot='变量名',获取子元素传递的内容 注意这里是v-slot=,注意和v-slot:区别开 -->
      <template v-slot="getSon">
        <h3>{{ getSon.obj.msg1 }}</h3>
        <h3>{{ getSon.obj.msg2 }}</h3>
      </template>
    </son>
  </div>
</template>

<script>
import son from "./components/son.vue";
export default {
  components: {
    son,
  },
};
</script>

<style scoped>
</style>

子元素

<template>
  <div>
    <h1>我是son组件</h1>
   
    <slot :obj="obj">我是插槽一默认显示内容</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        msg1: "我是子组件的信息1",
        msg2: "我是子组件的信息2",
      },
    };
  },
};
</script>

<style>
</style>