之前關于vue.js2.0父組件的一點學習，最近需要回顧，就順便發到隨筆上了
<body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementTotal"></button-counter> <button-counter v-on:ee="incrementTotal"></button-counter> </div> <script> Vue.component('button-counter', { template: '<button v-on:click="increment">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { increment: function () { this.counter += 1 this.$emit('ee', 'cc' ) } }, }) new Vue({ el: '#counter-event-example', data: { total: 'arg' }, methods: { incrementTotal: function (b) { this.total = b + '1'; } } }) </script> </body> 子組件通過$emit觸發父組件的事件，$emit后面的參數是向父組件傳參，注意，父組件的事件處理函數直接寫函數名即可，不要加(),參數直接傳遞到了父組件的methods的事件處理函數了。
另外，寫一個小拾遺。vue子組件用了定義模板組件功能，然后在父組件里定義一個HTML元素綁定這個子組件后才能在父組件通過這個HTML元素使用。
再說一個非常方便的v-ref
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="parent"> <input type="text" name="" id="" v-model="msg" /> <input type="button" id="" value="dianji" @click="clickDt" /> <user-profile ref="profile"></user-profile> </div> <script> Vue.component('user-profile', { template: '<span>{{ msg }}</span>', data: function () { return { msg: 123 }; }, methods: { greet: function (msg) { console.log(msg); } } }) // var parent = new Vue({el: '#parent'}); // var child = parent.$refs.profile; // child.greet(); new Vue({ el:"#parent", data:{ msg:"" }, methods: { clickDt(){ this.$refs.profile.greet(this.msg); } } }) </script> </body> </html> Vue2.0組件間數據傳遞
Vue1.0組件間傳遞
Vue2.0后$dispatch()，$broadcast()被棄用，見https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替換
1，父組件向子組件傳遞場景：Father上一個輸入框，根據輸入傳遞到Child組件上。
父組件：
<template> <div> <input type="text" v-model="msg"> <br> //將子控件屬性inputValue與父組件msg屬性綁定 <child :inputValue="msg"></child> </div></template><style></style><script> export default{ data(){ return { msg: '請輸入' } }, components: { child: require('./Child.vue') } }</script>子組件：
<template> <div> <p>{{inputValue}}</p> </div></template><style></style><script> export default{ props: { inputValue: String } }</script>2，子組件向父組件傳值場景：子組件上輸入框，輸入值改變后父組件監聽到，彈出彈框
父組件：
<template> <div>//message為子控件上綁定的通知；recieveMessage為父組件監聽到后的方法 <child2 v-on:message="recieveMessage"></child2> </div></template><script> import {Toast} from 'mint-ui' export default{ components: { child2: require('./Child2.vue'), Toast }, methods: { recieveMessage: function (text) { Toast('監聽到子組件變化'+text); } } }</script>子組件：
<template> <div> <input type="text" v-model="msg" @change="onInput"> </div></template><script> export default{ data(){ return { msg: '請輸入值' } }, methods: { onInput: function () { if (this.msg.trim()) { this.$emit('message', this.msg); } } } }</script>vue2.0父子組件以及非父子組件如何通信
1.父組件傳遞數據給子組件
父組件數據如何傳遞給子組件呢？可以通過props屬性來實現
父組件：
<parent> <child :child-msg="msg"></child>//這里必須要用 - 代替駝峰</parent>data(){ return { msg: [1,2,3] };}子組件通過props來接收數據:
方式1：
props: ['childMsg']
方式2 :
props: { childMsg: Array //這樣可以指定傳入的類型，如果類型不對，會警告}方式3：
props: { childMsg: { type: Array, default: [0,0,0] //這樣可以指定默認的值 }}這樣呢，就實現了父組件向子組件傳遞數據.
2.子組件與父組件通信
那么，如果子組件想要改變數據呢？這在vue中是不允許的，因為vue只允許單向數據傳遞，這時候我們可以通過觸發事件來通知父組件改變數據，從而達到改變子組件數據的目的.
子組件:
<template> <div @click="up"></div></template>methods: { up() { this.$emit('upup','hehe'); //主動觸發upup方法，'hehe'為向父組件傳遞的數據 }}父組件:
<div> <child @upup="change" :msg="msg"></child> //監聽子組件觸發的upup事件,然后調用change方法</div>methods: { change(msg) { this.msg = msg; }}3.非父子組件通信
如果2個組件不是父子組件那么如何通信呢？這時可以通過eventHub來實現通信.
所謂eventHub就是創建一個事件中心，相當于中轉站，可以用它來傳遞事件和接收事件.
let Hub = new Vue(); //創建事件中心
組件1觸發：
<div @click="eve"></div>methods: { eve() { Hub.$emit('change','hehe'); //Hub觸發事件 }}組件2接收:
<div></div>created() { Hub.$on('change', () => { //Hub接收事件 this.msg = 'hehe'; });}這樣就實現了非父子組件之間的通信了.原理就是把Hub當作一個中轉站！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
