Vue3笔记

(1)vue3动态引入背景图片（backgroundImage: url(xxx)）

<template v-for="(item,index) in drageItems" :key="index">
	<div class="item-icon-box" :style="{ backgroundImage: `url(${item.icon})` }"></div>
</template>


<script>
import table_input from '@/assets/image/table_input.png'
import range_check from '@/assets/image/range_check.png'


const list = [
	{name:'aaa',icon:table_input},
	{name:'bbb',icon:range_check },
	......
]
</script>
//vue2写法
//<script>
//const list = [
//	{name:'aaa',icon:require('@/assets/image/table_input.png') },
//	{name:'bbb',icon:require('@/assets/image/range_check.png') },
//	......
//]
//</script>

（2）vue3动态组件，异步加载

<component :is="componentName">
</component>

<script>
const componentsMap = {
	'test1':{name:'test1',component:() => import('./components/test1.vue')},
	'test2':{name:'test2',component:() => import('./components/test2.vue')},
}

const componentName = ref(null)
//异步注册动态组件
function registerComponent(name) {
	componentsMap[name].component().then((moudle)=>{
		componentName.value = moudle.default;
	})
}
</script>