全局组件注册语法
components中的两个参数组件名称和组件内容
1
2
3
4
|
Vue.component(组件名称, { data: 组件数据, template:组件模板内容 }) |
全局组件注册应用
组件创建:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
Vue.component( 'button-counter' , { data: function (){ return { count: 0 } }, template: '<button @click="handle">点击了{{count}}次</button>' , methods: { handle: function (){ this .count ++; } } }) var vm = new Vue({ el: '#app' , data: { } }); |
如何在页面中运用,直接在页面中应用组件名称
1
2
3
|
< div id = "app" > < button-counter ></ button-counter > </ div > |
这个组件是可以重用的,直接在页面中多次使用,切数据相互独立,互不干扰
组件注册注意事项
1.data必须是一个函数
- 分析函数与普通对象的对比
2.组件模板内容必须是单个根元素
- 分析演示实际的效果
3.组件模板内容可以是模板字符串
- 模板字符串需要浏览器提供支持(ES6语法)
4.组件命名方式
- 短横线方式
1
|
Vue.component( 'my-component' ,{ /*...*/ }) |
驼峰方式
1
|
Vue.component( 'MyComponent' ,{ /*...*/ }) |
如果使用驼峰式命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰的方式使用组件,但是在普通的标签模板中,必须使用短横线的方式使用组件
局部组件
局部组件只能在注册它的父组件中使用
局部组件注册语法
1
2
3
4
5
6
7
8
9
10
11
|
var ComponentA = { /*...*/ } var ComponentB = { /*...*/ } var ComponentC = { /*...*/ } new Vue({ el : '#app' , components: { 'component-a' : ComponentA, 'component-b' : ComponentB, 'component-c' : ComponentC } }) |
组件的创建
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
34
35
36
37
38
|
Vue.component( 'test-com' ,{ template: '<div>Test<hello-world></hello-world></div>' }); var HelloWorld = { data: function (){ return { msg: 'HelloWorld' } }, template: '<div>{{msg}}</div>' }; var HelloTom = { data: function (){ return { msg: 'HelloTom' } }, template: '<div>{{msg}}</div>' }; var HelloJerry = { data: function (){ return { msg: 'HelloJerry' } }, template: '<div>{{msg}}</div>' }; var vm = new Vue({ el: '#app' , data: { }, components: { 'hello-world' : HelloWorld, 'hello-tom' : HelloTom, 'hello-jerry' : HelloJerry } }); |
页面中的应用
1
2
3
4
5
6
|
< div id = "app" > < hello-world ></ hello-world > < hello-tom ></ hello-tom > < hello-jerry ></ hello-jerry > < test-com ></ test-com > </ div > |
以上就是Vue 组件注册全解析的详细内容,更多关于Vue 组件注册的资料请关注服务器之家其它相关文章!
原文链接:https://www.cnblogs.com/limu-zy/p/14146563.html