亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

在vue-cli中組件通信的方法

 更新時間：2017年12月16日 09:46:32   作者：a2774206  
本篇文章主要介紹了在vue-cli中組件通信的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了在vue-cli中組件通信的方法，分享給大家。具體如下：

vue組件之間的通信包括三種：

1.父組件向子組件通信
2.子組件向父組件通信
3.同級組件之間的通信

一.父傳子組件通信

拿app.vue當(dāng)父組件，content.vue當(dāng)子組件

1.父組件中導(dǎo)入子組件（子組件導(dǎo)出）

import contents from './components/content';

2.在父組件中注冊子組件

  data() {
    return {
        test:'0'
    };
  },
  components:{
    'v-header':headers,
    'v-content':contents
  }

3.子組件通過props來接收數(shù)據(jù)

<v-content :childs='test'></v-content>

二.子與父組件通信

子組件：

<template>
  <div @click="down()"></div>
</template>

methods: {
  down() {
    this.$emit('down','null'); //主動觸發(fā)down方法，'null'為向父組件傳遞的數(shù)據(jù)
  }
}

父組件：

<div>
  <child @down="changes" :test="test"></child> //監(jiān)聽子組件觸發(fā)的down事件,然后調(diào)用changes方法
</div>
methods: {
  changes(msg) {
    this.test= test;
  }
}

二.非父子組件通信

//把a當(dāng)作一個中轉(zhuǎn)站
var a = new Vue();

組件1觸發(fā)：

<div @click="eve"></div>
methods:{
  eve(){
  a.$emit("change",'null')
 }
}

組件2接收：

<div></div>
created(){
  a.$on('change',()=>{
    this.msg = 'null'
  })
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論