一、插槽
-
默认插槽
子组件
<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>