vue組件開發

時間 2019-11-13

標籤 vue 組件開發简体版

原文原文鏈接

什麼是vue組件

組件是Vue.js最強大的功能之一。組件能夠擴展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠是原生HTML元素的形式。css

組件使用步驟

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

<!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">
	        <input type="text" name="" value="" v-model="inp">{{inp}}
	        <br />
	        <my-con msg1="hello" msg2="world" v-bind:child-inp="inp" v-on:listen="change"></my-con>
	        <br />
	    </div>
	    <script>
	    var testconponent = Vue.extend({
	        props: ['msg1', 'msg2', 'childInp'],
	        template: "<h2> {{msg1}} {{msg2}}  {{childInp}}<br/><button [@click](https://my.oschina.net/willclick) = 'toUpper' >btn</button></h2>",
	        methods: {
	            toUpper: function() {
	               this.$emit('listen', 'abc');
	            }
	        }
	    });
	    Vue.component('my-con', testconponent);
	    new Vue({
	        el: '#box',
	        data(){
	        	return {
	        		inp:''
	        	}
	        },
	        methods:{
	        	change(data){
	        		this.inp = data;
	        	}
	        }
	    })
	    </script>
	</body>
	
	</html>

3. 非父子組件之間的通訊

上面咱們使用props只能解決父子組件之間的通訊，當兩個兄弟關係的組件，就不能這樣傳遞了
兄弟節點之間須要使用事件的觸發方法 $emit去實現vue

<!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監聽事件，就能夠實現數據的傳遞了。函數

4. 動態建立組件

使用is屬性動態添加組件post

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
	
	</head>
	<body>
	
	<div id="dynamic">
		<button id="home">Home</button>
		<button id="posts">Posts</button>
		<button id="archive">Archive</button>
		<br>
		<component :is="currentView"></component>
		</div>
	
		<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
		<script>
		var vue = new Vue({
		    el:"#dynamic",
			data: {
			currentView: "home"
			},
			components: {
				"home":{
					template: "<h2>home</h2>"
				},
				"posts": {
					template: "<h2>Posts</h2>"
				},
				"archive": {
					template: "<h2>Archive</h2>"
				}
			}
		});
		document.getElementById("home").onclick = function(){
		vue.currentView = "home";
		};
		document.getElementById("posts").onclick = function(){
		vue.currentView = "posts";
		};
		document.getElementById("archive").onclick = function(){
		vue.currentView = "archive";
		};
		</script>
	</body>
	</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。