vue3之动态组件代码

最新推荐文章于 2024-06-26 19:52:51 发布

默默努力的小老弟

最新推荐文章于 2024-06-26 19:52:51 发布

阅读量276

点赞数

文章标签： Vue3 动态组件事件处理组件切换模板

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121544221

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
	      <!-- <component is="my1"></component>  这个是直接声明你是什么组件-->
	   		<!-- 一定是个vue的变量 -->
	   		<!-- 动态组件 -->
	   		<!-- is指的是 你是什么组件 里面是组件名 -->
	   		<!-- xxx是vue的变量 -->
			<component :is="xxx"></component>
			

			<button @click="change">切换</button>
    </div>

    <template id="Box">
    	   xzzzzzz
    </template>






</body>
<script src="js/vue3.js"></script>
<script>
	

	const box={
		data(){
			return {
				nameArry : [ "ls",
				             'xm',
				             'xx'],
				msg:'xxxx0',
				
				
			};
		},
		template:'#Box',
		methods:{
			func1(){
				console.log(111);
			}
		}

	}
     //全局app不需要挂载
	const app=Vue.createApp({
       data(){
       		return {
				msg:"father",
				comName:'box',
				xxx:'my1'
			}
       },
       components:{
       	'lk':box,
       },
       methods:{
       	 clickComponent(){
       	 	console.log(this.$refs.ngs.msg);
       	 },
       	 change(){
             if(this.xxx==="my1"){
             		this.xxx="my2"
             }else if(this.xxx==="my2"){
             	this.xxx="my1"
             }
       	 	
         }
     }

	})
	
	app.component('my1',{
      template:"<div>xxxxx</div>"
	})
	app.component('my2',{
      template:"<div>yyyy</div>"
	})
	app.mount("#app");
	


</script>
</html>

默默努力的小老弟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue3之动态组件代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> 
复制链接

扫一扫