詳解vue.js2.0父組件點(diǎn)擊觸發(fā)子組件方法
之前關(guān)于vue.js2.0父組件的一點(diǎn)學(xué)習(xí)，最近需要回顧，就順便發(fā)到隨筆上了
<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>
子組件通過(guò)$emit觸發(fā)父組件的事件，$emit后面的參數(shù)是向父組件傳參，注意，父組件的事件處理函數(shù)直接寫函數(shù)名即可，不要加(),參數(shù)直接傳遞到了父組件的methods的事件處理函數(shù)了。
另外，寫一個(gè)小拾遺。vue子組件用了定義模板組件功能，然后在父組件里定義一個(gè)HTML元素綁定這個(gè)子組件后才能在父組件通過(guò)這個(gè)HTML元素使用。
再說(shuō)一個(gè)非常方便的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組件間數(shù)據(jù)傳遞
Vue1.0組件間傳遞
- 使用$on()監(jiān)聽事件；
- 使用$emit()在它上面觸發(fā)事件；
- 使用$dispatch()派發(fā)事件，事件沿著父鏈冒泡；
- 使用$broadcast()廣播事件，事件向下傳導(dǎo)給所有的后代
Vue2.0后$dispatch()，$broadcast()被棄用，見(jiàn)https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替換
1，父組件向子組件傳遞場(chǎng)景：Father上一個(gè)輸入框，根據(jù)輸入傳遞到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: '請(qǐng)輸入'
}
},
components: {
child: require('./Child.vue')
}
}
</script>
子組件：
<template>
<div>
<p>{{inputValue}}</p>
</div>
</template>
<style>
</style>
<script>
export default{
props: {
inputValue: String
}
}
</script>
2，子組件向父組件傳值場(chǎng)景：子組件上輸入框，輸入值改變后父組件監(jiān)聽到，彈出彈框
父組件：
<template>
<div>
//message為子控件上綁定的通知；recieveMessage為父組件監(jiān)聽到后的方法
<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('監(jiān)聽到子組件變化'+text);
}
}
}
</script>
子組件：
<template>
<div>
<input type="text" v-model="msg" @change="onInput">
</div>
</template>
<script>
export default{
data(){
return {
msg: '請(qǐng)輸入值'
}
},
methods: {
onInput: function () {
if (this.msg.trim()) {
this.$emit('message', this.msg);
}
}
}
}
</script>
vue2.0父子組件以及非父子組件如何通信
1.父組件傳遞數(shù)據(jù)給子組件
父組件數(shù)據(jù)如何傳遞給子組件呢？可以通過(guò)props屬性來(lái)實(shí)現(xiàn)
父組件：
<parent>
<child :child-msg="msg"></child>//這里必須要用 - 代替駝峰
</parent>
data(){
return {
msg: [1,2,3]
};
}
子組件通過(guò)props來(lái)接收數(shù)據(jù):
方式1：
props: ['childMsg']
方式2 :
props: {
childMsg: Array //這樣可以指定傳入的類型，如果類型不對(duì)，會(huì)警告
}
方式3：
props: {
childMsg: {
type: Array,
default: [0,0,0] //這樣可以指定默認(rèn)的值
}
}
這樣呢，就實(shí)現(xiàn)了父組件向子組件傳遞數(shù)據(jù).
2.子組件與父組件通信
那么，如果子組件想要改變數(shù)據(jù)呢？這在vue中是不允許的，因?yàn)関ue只允許單向數(shù)據(jù)傳遞，這時(shí)候我們可以通過(guò)觸發(fā)事件來(lái)通知父組件改變數(shù)據(jù)，從而達(dá)到改變子組件數(shù)據(jù)的目的.
子組件:
<template>
<div @click="up"></div>
</template>
methods: {
up() {
this.$emit('upup','hehe'); //主動(dòng)觸發(fā)upup方法，'hehe'為向父組件傳遞的數(shù)據(jù)
}
}
父組件:
<div>
<child @upup="change" :msg="msg"></child> //監(jiān)聽子組件觸發(fā)的upup事件,然后調(diào)用change方法
</div>
methods: {
change(msg) {
this.msg = msg;
}
}
3.非父子組件通信
如果2個(gè)組件不是父子組件那么如何通信呢？這時(shí)可以通過(guò)eventHub來(lái)實(shí)現(xiàn)通信.
所謂eventHub就是創(chuàng)建一個(gè)事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來(lái)傳遞事件和接收事件.
let Hub = new Vue(); //創(chuàng)建事件中心
組件1觸發(fā)：
<div @click="eve"></div>
methods: {
eve() {
Hub.$emit('change','hehe'); //Hub觸發(fā)事件
}
}
組件2接收:
<div></div>
created() {
Hub.$on('change', () => { //Hub接收事件
this.msg = 'hehe';
});
}
這樣就實(shí)現(xiàn)了非父子組件之間的通信了.原理就是把Hub當(dāng)作一個(gè)中轉(zhuǎn)站！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)輸入框只允許輸入數(shù)字
在vue項(xiàng)目中,輸入框只允許輸入數(shù)字,現(xiàn)將自己使用的一種方法記錄,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2023-11-11
本篇文章主要介紹了vue的一個(gè)分頁(yè)組件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能
這篇文章主要為大家詳細(xì)介紹了Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
Vue中computed(計(jì)算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說(shuō)明
這篇文章主要介紹了Vue中computed(計(jì)算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue3中子組件改變父組件傳過(guò)來(lái)的值(props)的方法小結(jié)
在 Vue 3 中,子組件改變父組件傳過(guò)來(lái)的值（props）的方法主要有以下幾種：通過(guò)事件發(fā)射、使用 v-model、模擬 .sync 修飾符的功能（Vue 3 中已移除）,以及使用 ref 或 reactive,下面我將結(jié)合代碼示例和使用場(chǎng)景詳細(xì)講解這些方法,需要的朋友可以參考下2025-04-04
在日常使用Vue開發(fā)項(xiàng)目的時(shí)候，計(jì)算屬性computed是一個(gè)非常常用的特性，本文就來(lái)分享一些使用Vue的computed計(jì)算屬性時(shí)的一些小技巧，希望能夠幫助到大家2023-06-06
Vue 動(dòng)態(tài)添加路由及生成菜單的方法示例
這篇文章主要介紹了Vue 動(dòng)態(tài)添加路由及生成菜單的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue打包后dist目錄下的index.html網(wǎng)頁(yè)顯示空白的問(wèn)題(兩種方案)
本文主要介紹了vue打包后dist目錄下的index.html網(wǎng)頁(yè)顯示空白的問(wèn)題,主要介紹了兩種方式,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
本文主要介紹了vue使用npm發(fā)布自己的公網(wǎng)包,通過(guò)創(chuàng)建一個(gè)簡(jiǎn)單的npm包,本文詳細(xì)闡述了從創(chuàng)建到發(fā)布的整個(gè)過(guò)程,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)
本文主要介紹了基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12