快捷導(dǎo)航

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: '我是來自父組件的消息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ù)
})

希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問題
這篇文章主要介紹了vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue3自定義hooks/可組合函數(shù)方式
這篇文章主要介紹了vue3自定義hooks/可組合函數(shù)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue實(shí)現(xiàn)百度下拉列表交互操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)百度下拉列表交互操作,結(jié)合實(shí)例形式分析了vue.js使用jsonp針對百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
Vue集成three.js并加載glb、gltf、FBX、json模型的場景分析
這篇文章主要介紹了Vue集成three.js，并加載glb、gltf、FBX、json模型,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09
淺談Vue中的this.$store.state.xx.xx
這篇文章主要介紹了Vue中的this.$store.state.xx.xx用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2021-09-09
React組件通信之路由傳參(react-router-dom)
本文主要介紹了React組件通信之路由傳參(react-router-dom)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
Vue.js下拉菜單組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js下拉菜單組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
vue打包后顯示空白正確處理方法
很多朋友遇到這樣的問題當(dāng)vue打包后顯示空白問題，遇到這樣的問題怎么處理呢？下面腳本之家小編給大家分享下vue打包后顯示空白正確處理方法，感興趣的朋友一起看看吧
2017-11-11
vue elementUI表格控制顯示隱藏對應(yīng)列的方法
這篇文章主要為大家詳細(xì)介紹了vue elementUI表格控制顯示隱藏對應(yīng)列的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue.js實(shí)現(xiàn)動態(tài)面包屑
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)動態(tài)面包屑，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04