(27条消息) vue不用脚手架封装组件的方法_前端boy的博客-CSDN博客_不使用脚手架封装组件

第一中：

	创建一个vue实例
		<div id="app">
		// mycom2 就是引入封装的公共组件			
		<mycom2></mycom2>
	</div>
	
	<!-- 定义再外面的 vue 模板组件而且是一个公共的组件 -->
	<template id="tmp1">
		<div>
			<h1>我是一个公共组件</h1>
		</div>
	</template>
	
		var app = new Vue({
			el: '#app',
			data: {},
			method: {},
		
		});
		//开始封装一个公共的组件
		Vue.component('mycom2', {
			template: '#tmp1'
		})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

第二种封装一个私有的组件

	<!-- 这是一个私有的组件只能在 div id='SY'的里面才能被访问 -->
	<div id="SY">
		<div>
			<login></login>
		</div>
	</div>

		<template id="tmp12">
		<div>
			<h1>这是一个私有的组件只能在 div id='SY'的里面才能被访问</h1>
		</div>
		</template>	

	var SY = new Vue({
			el: '#SY',
			data: {},
			method: {},
			components: {
				// login 是组件名
				login:{
					template:'#tmp12'
				}
			}
		})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

组件里封装 data 和方法
组件中的 data 有点不一样，实例中的 data 可以是一个对象 但是组件中的 data 必须是一个 方法 function 还必须在 function 方法中 return 返回一个对象

		<div id="app">
		//使用封装的组件
			<mycom1></mycom1>
		</div>
		
		//封装组件
			<template id="zujian">
				<div>
					<h1>{{msg}}</h1>
					<button type="button" @click="dianji">点我加1</button>
				</div>
			</template>
		var app = new Vue({
			el: "#app",
			data: {},
			methods: {}
		})

		//封装的组件
		Vue.component('mycom1', {
			template: '#zujian',
			data: function() {
				return {
					msg:'1'
				}
				
			},
			methods:{
				dianji(){
					this.msg ++
				}
			}
		})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33