vue局部组件与子组件

最新推荐文章于 2024-07-21 02:25:54 发布

Zaltana

最新推荐文章于 2024-07-21 02:25:54 发布

阅读量257

点赞数

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

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

版权

<!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:{//组件中的子组件写法
					"hello