Vue父子元件傳值
阿新 • • 發佈：2019-02-17
----父元件向子元件傳值-----
1. 父：v-bind:obj="" 子：props=['obj']
2. 父：引入元件上直接加屬性name="zy" 子：用thid.$refs通過dom取到屬性值zy
----子元件向父元件傳值----
1. 子：$emit(事件名)傳遞訊號 父：v-on:事件名="自身事件" 監聽訊號，一旦監聽到，立即觸發自身事件。 或者$on(事件名)監聽。程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>父子元件傳值</title> <script src="js/vue.js" type="text/javascript"></script> <style type="text/css"> .app{ width:300px; height: 300px; border: 1px solid #00ff00; } .card{ width:200px; height: 200px; border: 1px solid #ff0000; } </style> </head> <body> <div class="app"> <my-card v-bind:obj="colors" name="zy" v-on:listen="goto"></my-card> </div> <script> /* ----父元件向子元件傳資料----- 1. 父：v-bind:obj="" 子：props=['obj'] 2. 父：引入元件上直接加屬性name="zy"，子：用thid.$refs通過dom取到屬性值zy ----子元件向父元件傳資料----- 1. 子：$emit(事件名)傳遞訊號 父：v-on:事件名="自身事件" 監聽訊號，一旦監聽到，立即觸發自身事件。 或者$on(事件名)監聽。 */ Vue.component("my-card",{ template:'<div class="card" ref="card" v-on:click.stop="toclick">12345678</div>', props:['obj'], data: function(){ return { id: "我是子元件card" } }, methods:{ toclick: function(){ console.log("%%%%拿到props資料%%%%"); console.log(this.obj[0].color0); console.log("%%%%拿到虛擬dom%%%%"); console.log(this.$refs.card); console.log("%%%%拿到非prop傳入的name的屬性值%%%"); console.log(this.$refs.card.getAttribute('name')); //向父元件傳送訊號 this.$emit('listen',this.id); } } }) var app = new Vue({ el: ".app", data: { colors:[ {color0:'#0000ff'}, {color1:'#00ff00'} ] }, methods:{ goto: function(msg){ alert("我監聽到啦: " + msg); } } }); //這種方法的意義何在 // app.$on('test', function(msg){ // alert("我監聽到啦: "+msg); // }); // app.$emit('test','hello'); </script> </body> </html>