Fork me on GitHub

vue组件开发方法总结

Posted on | In | Views:

VUE 组件的三种开发方式
开发组件大致分为3个步骤： 组件声明-组件注册（全局和局部）-组件使用

使用 script 标签

1.组件声明

1
2
3
4
5
6
7
8
9
<!-- 注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。-->	
<!-- type 和 id 必须要填写 -->
<script type="text/x-template" id="myComponent">
	<!--只能有一个根节点，下面两种方式同样遵循-->
       <div class="root">
		<p>我是p1</p>
		<p>我是p2</p>
	</div>
   </script>


2.组件注册（分为全局注册和局部注册）

1
2
3
4
5
6
7
全局注册：需要确保在根实例初始化之前注册，这样才能使组件在任意实例中都可以使用。
	Vue.component('my-component',MyComponent);//此句一定要放在new Vue({...});之前
局部注册：限定了组件只能在被注册的组件中使用，而无法在其他组件中使用。
//全局注册组件
Vue.component('my-component',{
	template: '#myComponent'
});


3.组件使用

1
2
3
<div id="app">
       <my-component></my-component>
   </div>


本例全部代码

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
<!DOCTYPE html>
<html>
	<body>
		<div id="app">
			<!--3.组件使用-->
			<my-component></my-component>
		</div>
		
		<!--1.组件声明-->
		<script type="text/x-template" id="myComponent">
			<div>This is a component!</div>
		</script>
	</body>
	<script src="js/vue.js"></script>
	<script>
		<!--2.组件注册-->
		Vue.component('my-component',{
			template: '#myComponent'
		});
		new Vue({
			el: '#app'
		});
	</script>
</html>

使用 template 标签

1.组件声明

1
2
3
<template id="myComponent">
       <div>This is a component!</div>
   </template>


2.组件注册

1
2
3
Vue.component('my-component',{
	template: '#myComponent'
});


3.使用组件

1
2
3
<div id="app">
       <my-component></my-component>
   </div>


本例全部代码

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
<!DOCTYPE html>
<html>
	<body>
		<div id="app">
			<!--3.组件使用-->
			<my-component></my-component>
		</div>
		
		<!--1.组件声明-->
		<template id="myComponent">
			<div>This is a component!</div>
		</template>
	</body>
	<script src="js/vue.js"></script>
	<script>
		<!--2.组件注册-->
		Vue.component('my-component',{
			template: '#myComponent'
		});
		new Vue({
			el: '#app'
		});
	</script>
</html>

单文件组件

注：这种方法常用在vue单页应用中。
1.创建组件（hello.vue）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div class="hello">
	<h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
	return {
	  msg: '欢迎！'
	}
  }
}
</script>


父组件代码（app.vue，这里app.vue为hello.vue的父组件）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 展示模板 -->
<template>
  <div id="app">
	<!-- 3.使用组件 -->
	<hello></hello>
  </div>
</template>
<script>
// 导入组件
import Hello from './components/hello'
export default {
  name: 'app',
  // 2.这里进行组件局部注册
  components: {
	Hello
  }
}
</script>

参考文档：
vue官网
vue组件的3种书写形式
vue.js中组件的创建和使用方法

-------------本文结束感谢您的阅读，如果本文对你有帮助就记得给个star-------------
Donate comment here
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多