vue.js2.0父元件點選觸發子元件方法
阿新 • • 發佈：2019-01-08
<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
Vue2.0元件間資料傳遞<!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>
Vue1.0元件間傳遞
使用$on()監聽事件；
使用$emit()在它上面觸發事件；
使用$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>
1.父元件傳遞資料給子元件
父元件資料如何傳遞給子元件呢？可以通過props屬性來實現
父元件：
<parent>
<child :child-msg="msg"></child>//這裡必須要用 - 代替駝峰
</parent>
data(){
return {
msg: [1,2,3]
};
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
子元件通過props來接收資料:
方式1：
props: ['childMsg']- 1
- 1
方式2 :
props: {
childMsg: Array //這樣可以指定傳入的型別，如果型別不對，會警告
}- 1
- 2
- 3
- 1
- 2
- 3
方式3：
props: {
childMsg: {
type: Array,
default: [0,0,0] //這樣可以指定預設的值
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
這樣呢，就實現了父元件向子元件傳遞資料.
2.子元件與父元件通訊
那麼，如果子元件想要改變資料呢？這在vue中是不允許的，因為vue只允許單向資料傳遞，這時候我們可以通過觸發事件來通知父元件改變資料，從而達到改變子元件資料的目的.
子元件:
<template>
<div @click="up"></div>
</template>
methods: {
up() {
this.$emit('upup','hehe'); //主動觸發upup方法，'hehe'為向父元件傳遞的資料
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
父元件:
<div>
<child @upup="change" :msg="msg"></child> //監聽子元件觸發的upup事件,然後呼叫change方法
</div>
methods: {
change(msg) {
this.msg = msg;
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
3.非父子元件通訊
如果2個元件不是父子元件那麼如何通訊呢？這時可以通過eventHub來實現通訊.
所謂eventHub就是建立一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件.
let Hub = new Vue(); //建立事件中心- 1
- 1
元件1觸發：
<div @click="eve"></div>
methods: {
eve() {
Hub.$emit('change','hehe'); //Hub觸發事件
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
元件2接收:
<div></div>
created() {
Hub.$on('change', () => { //Hub接收事件
this.msg = 'hehe';
});
}- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
這樣就實現了非父子元件之間的通訊了.原理就是把Hub當作一箇中轉站！
- 頂
- 踩