Vue3学习

关注

原创 2023-08-08 11:52:23 162 阅读 AI 写同款· GEO 优化 ›

Vue 3 学习难点解析然而，Vue 3 也存在一些学习难点，如新的 Composition API、响应式系统的变化、类型推断和类型支持、组件开发和组合、状态管理和数据共享以及高级特性和工具等。通过系统学习和实践、深入理解原理和机制以及持续学习和更新等方法，可以克服这些学习难点，掌握 Vue 3 的知识和技能。Vue.js 是一款流行的前端 JavaScript 框架，Vue 3 在 Vue 2 的基础上进行了重大的更新和改进，带来了更高效的性能、更强大的功能和更灵活的开发体验。新的 Composition API。阅读详情

动态组件

<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插槽