vue局部组件与子组件

最新推荐文章于 2024-04-02 00:00:00 发布

Zaltana

最新推荐文章于 2024-04-02 00:00:00 发布

阅读量106

点赞数

分类专栏：框架文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/zhoulina815/article/details/123326039

版权

框架专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<hello></hello>
		</div>
		<div id="app2" style="width:500px;height:500px;border:1px solid red">
			
		</div>
		<script>
			// 局部的组件只能在固定的 vue对象里使用
			var obj={
				template:`
				 <div>
				   <h2 style="color:red">我是hello标签</h2>
				   <div>{{msg}}</div>
				   <button @click="showMessage">显示信息</button>
				   <hellochild></hellochild>
				 </div>
				`,// 在组件里数据是以函数进行返回
				data:function(){					
					return {
						msg:"李李"
					}
				},
				methods:{
					showMessage(){
						alert('小哥哥呀')
					}
				},
				components:{//组件中的子组件写法
					"hellochild":{template:`
					 <div style="color:purple">我是hello组件的子组件</div>
					`}
				}
			}		
			
			var app = new Vue({
				el:"#app",
				// hello组件的使用范围只能是在 id="app"的div中,一旦超出范围就报错了
				components:{
					"hello":obj
				}
				
			})
			
			var app2 = new Vue({
				el:"#app2",
				
			})
			
		</script>
	</body>
</html>

Zaltana

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue局部组件与子组件

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <hello></hello> </div>.
复制链接

扫一扫