Vue私有组件的使用

最新推荐文章于 2023-04-02 15:43:38 发布

qq_38504352

最新推荐文章于 2023-04-02 15:43:38 发布

阅读量218

点赞数

本文链接：https://blog.csdn.net/qq_38504352/article/details/104259125

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组建组件的方式</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<my-component></my-component>
		</div>
		<div id="app2">
			<my-component></my-component>
			<my-component2></my-component2>
		</div>
		
		<template id="temp1">
			<div>
				<h1>哈哈哈{{count}}</h1>
				<button @click="add">点我</button>
			</div>
		</template>
		
		<template id="temp2">
			<div>
				<div>我是私有组件</div>
			</div>
		</template>
		<script type="text/javascript">
			//Vue组件中的data是一个方法，必须返回一个return 对象
			//组件的存在是为了复用性，定义了一个组件后，可能会有多个地方使用到该组件
			Vue.component("myComponent",{
				template:"#temp1",
				data () {
					return {
						count:0
					}
				},
				methods:{
					add(){
						this.count++
					}
				}
			})
			
			var vue =new Vue({
				el:"#app",
				data:{
					
				},
				filters:{
					
				}
			})
			var vue2 =new Vue({
				el:"#app2",
				//定义私有组件的方式
				//组件名称建议用引号包起来
				data:{
					'myComponent2':{
						template:'#temp2'
					}
				},
				filters:{
					
				}
			})
			
		</script>
	</body>
</html>