vue组件开发技术指南

什么是vue组件

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式。

组件使用步骤

1. 定义组件

    var myComponent = Vue.extend({ 		template:"<h2>this is my first component</h2>" 	});

2. 注册组件

	 全局注册组件      Vue.component('myComponent',myComponent) 	 局部注册组件 	 var apk = new Vue({ 	    el:"#apk", 	    components:{ 	 	"myComponent":myComponent 	   }      })

3. 使用组件

	<div id="apk"> 		<my-component></my-component> 	</div>

4. 上面的定义过程比较繁琐，也可以不用每次都调用Vue.component和Vue.extend方法:

    // 在一个步骤中扩展与注册     Vue.component('my-component', {     	template: '<div>A custom component!</div>'     })          // 局部注册也可以这么做     var Parent = Vue.extend({    		 components: { 	    	'my-component': { 	    		template: '<div>A custom component!</div>' 	   		 }     	}     })

组件常用方法使用

1. 嵌套组件

组件本身也可以包含组件，下面的parent组件就包含了一个命名为child-component组件，但这个组件只能被parent组件使用:  	var myComponent = Vue.extend({ 		template:"<h2>this is my first component</h2>" 	}); 	var myComponent2 = Vue.extend({ 		template:"<h2>嵌套组件:<myComponent1></myComponent1></h2>", 		components:{ 			"myComponent1":myComponent 		} 	});

2. 父子组件之间的通信

使用 v-bind：（或直接用冒号）传递数据，使用props接收数据，先看如下代码：

	//html 	<input type="text" name="" value="" v-model="inp">{{inp}}<br /> 	<my-con msg1="hello" msg2="world" v-bind:child-inp="inp"></my-con><br /> 	 	//js代码 	var testconponent=Vue.extend({ 		props:['msg1','msg2','childInp'], 		template:"<h2>hello{{msg1}}{{msg2}}<br/><button v-on:click='toUpper'>btn</button></h2>", 		methods:{ 			toUpper:function(){ 				console.log('dfdf'); 			} 		} 	}); 	Vue.component('my-con',testconponent);

3. 非父子组件之间的通信

上面我们使用props只能解决父子组件之间的通信，当两个兄弟关系的组件，就不能这样传递了
兄弟节点之间需要使用事件的触发方法 $emit去实现

	<!DOCTYPE html> 	<html lang="en"> 	<head> 	    <meta charset="UTF-8"> 	    <title>Title</title> 	    <script src="https://unpkg.com/vue/dist/vue.js"></script> 	</head> 	<body> 	   <div id="box"> 	       <com-a></com-a> <!-- 调用com-a组件 --> 	       <com-c></com-c><!-- 调用com-c组件 --> 	   </div> 	<script> 	   var Event=new Vue();  // 声明一个独立的空Vue公用实例，用来触发通讯的事件 	 	    var a={ 	        template:'<div><span>我是a组件，我的数据内容是{{msga}}</span><br><input type="button" value="我要发送数据" @click="send"></div>', 	        data(){ 	            return{ 	             msga:'我是a数据，我要发送给兄弟组件' 	            } 	        }, 	        methods:{ 	            send(){ 	                Event.$emit('a-msg',this.msga)  //触发前面 Event 公用示例的方法，那么别的地方就可以想办法监听接收这个事件。参数（事件名，传输的值） 	            } 	        } 	    }; 	    var c={ 	        template:"<div><h3>这是C组件</h3><span>我从A里面接受的数据：{{a}}</span></div>", 	        data(){ 	            return{ 	                a:'' 	            } 	        }, 	        mounted(){    //这里的mouted表示当组件和页面挂载完成的时候，需要执行的函数 	            var _this = this;  //因为在Event.on内部的this是指向 Event实例的，所以这里，先使用 _this将this存起来，后面就可以使用了。 	            Event.$on('a-msg',function (a) {  //使用on监听事件 a-msg，这样当a组件中使用 emit主动触发了 Event实例的a-msg事件之后，这里就可以接收到 	                alert('触发了接收'); 	                _this.a = a; 	            }) 	        } 	    }; 	    new Vue({ 	        el:'#box', 	        components:{ 	            'com-a':a, 	            'com-c':c 	        } 	    }) 	</script> 	</body> 	</html>

代码中，我们声明了一个独立的空Vue公用实例，用来触发通讯的事件。在a组件中使用 $emit触发事件，在 c组件中使用on监听事件，就可以实现数据的传递了。

本文发表于2017年09月10日 17:45
(c)注：本文转载自https://my.oschina.net/u/1778998/blog/1533746，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.

阅读 2296 讨论 0 喜欢 0

快捷链接
网站地图
提交友链

vue组件开发