欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

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

一.父?jìng)髯咏M件通信

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

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

import contents from './components/content';

2.在父組件中注冊(cè)子組件

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

3.子組件通過(guò)props來(lái)接收數(shù)據(jù)

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

二.子與父組件通信

子組件：

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

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

父組件：

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

二.非父子組件通信

//把a(bǔ)當(dāng)作一個(gè)中轉(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'
  })
}

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

相關(guān)文章

最新評(píng)論