vue組件通信傳值操作示例
更新時(shí)間：2019年01月08日 10:30:42 作者：anne_zhou
這篇文章主要介紹了vue組件通信傳值操作,結(jié)合實(shí)例形式分析了vue.js父子組件通信及兄弟組件通信相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue組件通信傳值操作。分享給大家供大家參考，具體如下：
父子組件通信：
子組件
<template>
<div>
<h3 @click="alerrt"> 我是子組件一</h3>
<span>{{parentMessage}}</span>
</div>
</template>
<script>
export default{
props: ['parentMessage'],
mounted() {
// this.$emit('childEvent');
},
methods:{
alerrt(){
this.$emit('childEvent',{name:'zhangsan',age:10 });
}
}
}
</script>
<style scoped>
</style>
父組件
<template>
<div>
<h2>父組件</h2>
<span>父組件傳遞消息給子組件</span>
<br>
<router-view @childEvent="parentMethod" :parentMessage="parentMessage" />
<!-- <Child-one :parentMessage="parentMessage"></Child-one> -->
<button type="" @click='extendTest'>extend</button>
<div id="extend"></div>
</div>
</template>
<script>
import ChildOne from './ChildOne'
export default{
components: {
ChildOne
},
methods: {
parentMethod({name,age}) {
alert(this.parentMessage);
console.log(this.parentMessage,name,age);
},
extendTest() {
console.log('333');
var Extend = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
new Extend().$mount('#extend')
},
},
data () {
return {
parentMessage: '我是來(lái)自父組件的消息aaaa'
}
}
}
</script>
<style scoped>
</style>
兄弟組件通信：
在main,js里加
import Vue from 'vue' window.eventBus = new Vue();
在組件里
兄弟1組件：
window.eventBus.$emit('函數(shù)名稱', {參數(shù) 鍵：值});
兄弟2組件：
window.eventBus.$on('grouprecording',參數(shù) =>{
//處理數(shù)據(jù)
})
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue-cli系列之vue-cli-service整體架構(gòu)淺析
這篇文章主要介紹了vue-cli系列之vue-cli-service整體架構(gòu)淺析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
viewer.js用于圖片瀏覽的Vue組件,支持旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作,這篇文章主要給大家介紹了關(guān)于vue3使用viewer的詳細(xì)用法,文中通過(guò)代碼介紹是非常詳細(xì),需要的朋友可以參考下2023-12-12
vue :style設(shè)置背景圖片方式backgroundImage
這篇文章主要介紹了vue :style設(shè)置背景圖片方式backgroundImage,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue-cli@3.0 插件系統(tǒng)簡(jiǎn)析
Vue-cli@3.0 是一個(gè)全新的 Vue 項(xiàng)目腳手架。這篇文章主要介紹了Vue-cli@3.0 插件系統(tǒng)簡(jiǎn)析,需要的朋友可以參考下2018-09-09
解決Vue keep-alive 調(diào)用 $destory() 頁(yè)面不再被緩存的情況
這篇文章主要介紹了解決Vue keep-alive 調(diào)用 $destory() 頁(yè)面不再被緩存的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue3.3?+?TS4構(gòu)建實(shí)現(xiàn)ElementPlus功能的組件庫(kù)示例
Vue.js?是目前最盛行的前端框架之一,而?TypeScript?則是一種靜態(tài)類型言語(yǔ),它能夠讓開(kāi)發(fā)人員在編寫代碼時(shí)愈加平安和高效,本文將引見(jiàn)如何運(yùn)用?Vue.js?3.3?和?TypeScript?4?構(gòu)建一個(gè)自主打造媲美?ElementPlus?的組件庫(kù)2023-10-10
Vue2.x Todo之自定義指令實(shí)現(xiàn)自動(dòng)聚焦的方法
我們希望用戶雙擊 todo 進(jìn)入編輯狀態(tài)后輸入框自動(dòng)獲取焦點(diǎn)，而不是需要先手動(dòng)點(diǎn)一下。這篇文章主要介紹了Vue 2.x Todo之自定義指令實(shí)現(xiàn)自動(dòng)聚焦,非常具有實(shí)用價(jià)值，需要的朋友可以參考下2019-01-01
vue .then和鏈?zhǔn)秸{(diào)用操作方法
這篇文章主要介紹了vue .then和鏈?zhǔn)秸{(diào)用操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
layer.js(mobile)是一個(gè)小巧方便的彈出層插件，在之前的apicloud項(xiàng)目中被大量使用，但最近對(duì)apicloud的IDE、非常不友好的文檔和極低的開(kāi)發(fā)效率深感厭煩，決定棄用然后轉(zhuǎn)向Vue開(kāi)發(fā)。這篇文章主要介紹了vue-cli腳手架引入彈出層layer插件的幾種方法，需要的朋友可以參考下2019-06-06
vue+vant-UI框架實(shí)現(xiàn)購(gòu)物車的復(fù)選框全選和反選功能
這篇文章主要介紹了vue+vant-UI框架實(shí)現(xiàn)購(gòu)物車的復(fù)選框全選和反選功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11