溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關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組件間傳遞
使用$on()監聽事件；
使用$emit()在它上面觸發事件；
使用$dispatch()派發事件，事件沿著父鏈冒泡；
使用$broadcast()廣播事件，事件向下傳導給所有的后代
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';
});
}看完上述內容，你們對vue.js2.0中怎么實現父組件點擊觸發子組件有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
