概述

vue中組件之間的傳值傳值情況主要有以下三種

父組件向子組件傳值
子組件向父組件傳值
兄弟組件之間相互傳值或者是兩個沒有關(guān)系的組件之間的傳值

在開始介紹之前我們先建立3個vue文件，文件名分別為:Parent.vue , Child1.vue , Child2.vue

1、父組件向子組件傳值

這種情況是三種傳值方案中最簡單的, 通過在子組件中使用 props就可以實(shí)現(xiàn)

父組件Parent.vue中的代碼

<template>
  <div>
    <child-1  :btnName="btnName"/>
  </div>
</template>
<script>
import Child1 from './Child1'

export default {
  name: 'Parent',
  components: {
    'child-1': Child1
  },
  data () {
    return {
      btnName: ' 我是一個button'
    }
  }
}
</script>

子組件Child1.vue

<template>
    <button > {{btnName}}</button>
</template>
<script>
export default {
  name: 'Child1',
  props: ['btnName']
}
</script>
<style>
    button{
        padding:5px 10px;
        margin:2px;
        background-color:#fff;
        border-radius: 5px; 
    }
</style>

關(guān)鍵點(diǎn)就是需要在子組件中 使用 props 關(guān)鍵字 來接收父組件傳過來的值

2、子組件向父組件傳值

在子組件向父組件傳值時需要使用 vue 中的 emit ，使用on 中監(jiān)聽的事件，現(xiàn)在我們來實(shí)現(xiàn)一個可以統(tǒng)計按鈕點(diǎn)擊次數(shù)的功能
在父組件中有個 count 字段用于統(tǒng)計，button點(diǎn)擊的次數(shù)
首先我們需要在Parent.vue的data中定義count變量，默認(rèn)值為0，代碼如下：

data () {
    return {
      btnName: ' 我是一個button',
      count: 0
    }
  }

然后將count加入到template中便于顯示, 此時parent.vue的template的代碼如下

<template>
  <div>
    <p>點(diǎn)擊次數(shù): {{count}}</p>
    <child-1  :btnName="btnName"/>
  </div>
</template>

接下來我們需要在父組件中增加一個可以改變count值的事件,同時在 中加上監(jiān)聽事件

<template>
  <div>
    <p>點(diǎn)擊次數(shù): {{count}}</p>
    <child-1  :btnName="btnName" @update:count="changeCount"/>
  </div>
</template>
<script>
import Child1 from './Child1'

export default {
  name: 'Parent',
  components: {
    'child-1': Child1
  },
  data () {
    return {
      btnName: ' 我是一個button',
      count: 0
    }
  },
  methods: {
    changeCount () {
      ++this.count
    }
  }
}
</script>

子組件Child1.vue

<template>
    <button @click="clickHandle"> {{btnName}}</button>
</template>
<script>
export default {
  name: 'Child1',
  props: ['btnName'],
  methods: {
    clickHandle () {
      this.$emit('update:count')
    }
  }
}
</script>

現(xiàn)在通過點(diǎn)擊button即可實(shí)現(xiàn)改變count的值

3、兄弟組件之間的傳值

(1)將需要改變的值放到父組件中，子組件通過props來獲取父組件的值
(2)通過eventbus 來實(shí)現(xiàn)兄弟組件之間的傳值，其原理還是通過 emit來時實(shí)現(xiàn)的，區(qū)別是現(xiàn)在全局建立一個空的vue對象，然后將事件綁定到該空對象上，最后通過該空對象來觸發(fā)$on監(jiān)聽的事件
兄弟A

<template>
  <div class="comA">
    <input type="button" value="comA" @click="toB" />
  </div>
</template>

<script>
import bus from "../bus.js";
export default {
  created() {
    bus.$on("toA", value => {
      console.log("組件A");
      console.log(value);
    });
  },
  methods: {
    toB() {
      bus.$emit("toB", "來自于A的數(shù)據(jù)");
    }
  }
};
</script>

<style>
.comA {
  width: 200px;
  height: 200px;
  background-color: hotpink;
  display: inline-block;
  margin-right: 10px;
}
</style>

兄弟B

<template>
  <div class="comB">
    <input type="button" value="comB" @click='toA' />
  </div>
</template>

<script>
import bus from '../bus.js'
export default {
  created() {
    bus.$on('toB',(value)=>{
      console.log('組件B');
      console.log(value);
    })
  },
  methods: {
    toA(){
      bus.$emit('toA','來自于B的數(shù)據(jù)哦?。?！#@！#！@#@！@#?。#')
    }
  },
};
</script>

<style>
.comB {
  width: 200px;
  height: 200px;
  background-color: #0094ff;
  display: inline-block;
  margin-right: 10px;
}
</style>

用法較為復(fù)雜名 , 需要在多個組件中 監(jiān)聽和觸發(fā)事件 , 不利于維護(hù)
這樣情況直接用Vuex1就可以了 . 所以bus模式 , 基本上已經(jīng)摒棄了