vue3笔记3之“默认插槽、具名插槽”

一、插槽

1. 默认插槽

子组件

<template>
  <h2>姓名：{{ yk.name }}</h2>
  <slot></slot>
</template>
<script>
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    let yk = reactive({
      name: "YK菌",
      age: 18,
    })
    return{
      yk,
    }
  }
};
</script>

父组件

<template>
  <h1>博主的信息</h1>
  <HelloWorld>
    <span>YK菌，你好</span>
  </HelloWorld>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "App",
  setup() {
  },
  components: { HelloWorld },
};
</script>

2.具名插槽

<template>
  <h1>博主的信息</h1>
  <HelloWorld>
	<template v-slot:ykMsg>
		<span>YK菌，你好</span>
	</template>
  </HelloWorld>
</template>

<template>
  <h2>姓名：{{ yk.name }}</h2>
  <slot name="ykMsg"></slot>
</template>