Vue3学习

原创已于 2023-08-08 11:52:23 修改 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #vue.js #javascript

于 2023-08-08 11:05:57 首次发布

博客介绍了Vue中的动态组件和插槽。提到子组件Child.vue，以及父组件使用插槽的方式，即在父组件中给子插槽添加内容，涉及Vue.js和JavaScript相关知识。

动态组件

<component :is='compId'></component>

import {ref, reactive, markRaw, shallowRef} from 'vue'
import AVue from '@/view/A.vue'
import BVue from '@/view/B.vue'

const compId = shallowRef(AVue)

const data = reactive([
	{
		name:'A组件',
		comp:markRaw(AVue)
	},
	{
		name:'B组件',
		comp:markRaw(BVue)
	}
])

const switch = (item, index)=>{
	compId.value = item.comp
}

插槽

子 Child.vue

<template>
    <div>
        <slot></slot>
    </div>
    <div>
        <slot name='header'></slot>
    </div>
    <div v-for='item in data'>  //往父组件传值
        <slot name='main' :data='item'></slot>
    </div>
    <div>
        <slot name='footer'></slot>
    </div>
</template>
const data = reactive([
    {
        name:'Jason',
        age:20
    },
    {
        name:'Harry',
        age:30
    }
])

父:使用插槽，在父组件中给子插槽添加内容

import Dialog from '../views/Child.vue'
<Dialog>
    <template v-slot> 可简写成<template #default>
        <div>123</div>
    </template>
    <template v-slot:header> 可简写成<template #header>
        <div>头部</div>
    </template>
    <template v-slot:main={data}> //接收子组件的传值
        <div>{{data}}</div>
    </template>
    //动态插槽
    <template #[name]>
        <div>在这里</div>
    </template>
</Dialog>

let name = ref('footer') //动态插入到footer插槽