Vue——全局组件和局部组件的注册

一、全局组件注册语法：

   Vue.component(组件名称,{
                data:组件数据,
                template:组件模板内容
                }) 

组件命名方式：
            1.短横线
            Vue.component('my-component',{
                data:组件数据,
                template:组件模板内容})
            2.驼峰使
            Vue.component('MyComponent',{
                data:组件数据,
                template:组件模板内容
            })

如果使用驼峰式命名组件，那么必须在使用的时候，只能在字符串模板中用驼峰方式使用；在普通的标签模板中，必须用短横线的方式(可将驼峰式转化为短横线形式，首字母小写，单词中间用-)    

例：定义一个组件 button-counter，用法：每次点击按钮加2

  Vue.component('button-counter',{
		 	data:function() {
		  		return {
		  			count:0
		  		}
		  	},
		  	template:'<button @click="handle">点击了{{count}}次</button><button></button>',
		  	methods:{
		  		handle:function(){
		  			this.count += 2;
		  		}
		  	}
		  });
   var vm = new Vue({
		 	el:'#app',
		 	data:{

		 	},
		 	methods:{
		 		
		 	}
		 })

使用方法：

<div id="app">
		<button-counter></button-counter>
	</div>

二、注意事项：

1.data必须是一个函数（本质上是形成了闭包的环境，保证每一个组件拥有一个独立的属性）

解释：一般情况下，data域如下。在组件化中data域必须是函数（如上），否则会报错

var vm = new Vue({
		 	el:'#app',
		 	data:{
                          a:1,
		 	},
		 	methods:{
		 		
		 	}
		 })

2.模板组件的内容必须是单个根元素。

解释：错误方式如下，''中有两组<button>。可将两组<button>用<div>包住，解决此类报错

 Vue.component('button-counter',{
		  	data:function() {
		  		return {
		  			count:0
		  		}
		  	},
		  	template:'<button @click="handle">点击了{{count}}次</button><button>测试</button>',
		  	methods:{
		  		handle:function(){
		  			this.count += 2;
		  		}
		  	}
		  })

3.组件模板内容可以是模板字符串（模板字符串需要浏览器提供支持ES6语法），在template中用反引号``，在Ecs按键下面

 Vue.component('button-counter',{
		 	data:function() {
		 		return {
		 			count:0
		 		}
		 	},
		 	template:`
		 	<div>
		 	<button @click="handle">点击了{{count}}次</button>
		 	<button></button>
		 	</div>
		 	`,
		 	methods:{
		 		handle:function(){
		 			this.count += 2;
		 		}
		 	}
		 })

三、局部组件

如下，用compents定义，注意是复数。内容可以用函数抽取出来。

注意：局部组件只能在注册他的父组件中使用

		 var vm = new Vue({
		 	el:'#app',
		 	data:{

		 	},
		 	components: {
		 		//注册局部组件，局部组件的内容可以通过函数抽取出来
		 		'hello-a': HelloA,
		 		'hello-b': HelloB,
		 		'hello-c': HelloC,
		 	}
		 })

函数抽取代码示例，注意data域为函数

        var HelloA = {
		 	data:function() {
		 		return {
		 			msg:'hello a',
		 		}
		 	},
		 	template:'<div>{{msg}}</div>'
		 };
		 var HelloB = {
		 	data:function() {
		 		return {
		 			msg:'hello b',
		 		}
		 	},
		 	template:'<div>{{msg}}</div>'
		 };
		 var HelloC = {
		 	data:function() {
		 		return {
		 			msg:'hello c',
		 		}
		 	},
		 	template:'<div>{{msg}}</div>'
		 };

组局组件使用示例：

    <div id="app">
		<hello-a></hello-a>
		<hello-b></hello-b>
		<hello-c></hello-c>
	</div>

结果显示：

最后

以上就是温暖小丸子为你收集整理的Vue——全局组件和局部组件的注册的全部内容，希望文章能够帮你解决Vue——全局组件和局部组件的注册所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。