uniapp組件傳值實現方法

一、Prop方式

組件傳值的第一種方式就是採用Vue.js中的prop，即父組件通過向子組件傳值的方式實現組件間數據通信的目的。使用prop的好處是簡單且易於理解，同時也符合Vue.js的思想。

<template>
  <div>
    <child :message="parentMsg"></child>
  </div>
</template>

<script>
  import child from './child.vue'
  export default {
    data () {
      return{
        parentMsg: '來自父組件的消息'
      }
    },
    components: {
      child
    }
  }
  </script>

上面的代碼中，父組件通過定義parentMsg這個data屬性，並將其傳值給子組件的message屬性，在子組件中可直接使用該值進行對應的操作。

二、$emit方式

$emit方式是Vue.js官方推薦的一種從子組件向父組件發送消息的方法。當子組件需要向父組件傳遞某些數據的時候，可以通過在子組件定義事件，並在事件內調用$emit方法來實現父子組件之間的通信。

<template>
  <div>
    <button @click="sendMsg">子組件向父組件發送消息</button>
  </div>
</template>

<script>
  export default {
    data () {
      return{
        childMsg: '來自子組件的消息'
      }
    },
    methods: {
      sendMsg(){
        this.$emit('sendMessage',this.childMsg)
      }
    }
  }
  </script>

上面的代碼中，子組件中定義了一個sendMsg方法，並在該方法中通過$emit方法向父組件發送了一個名為sendMessage的事件，並將來自子組件的數據childMsg作為參數傳遞給該方法。

三、EventBus方式

EventBus是Vue.js中一種實現任意組件通信的方式，其原理是採用一個空的Vue實例作為事件中心，用它來觸發事件和監聽事件。由此實現任意組件之間的通信。

/* eventBus.js */
import Vue from 'vue';
var bus = new Vue();
export default bus;

/* 子組件 A */
import bus from '../eventBus.js';
export default {
  data () {
    return{
      childAMsg: '來自子組件A的消息'
    }
  },
  methods: {
    sendMsgA(){
      bus.$emit('sendMessage',this.childAMsg)
    }
  }
  /* 其他代碼 */
}

/* 子組件 B */
import bus from '../eventBus.js';
export default {
  data () {
    return{
      childBMsg: '來自子組件B的消息'
    }
  },
  methods: {
    sendMsgB(){
      bus.$emit('sendMessage',this.childBMsg)
    }
  }
  /* 其他代碼 */
}

/* 父組件 */
import bus from '../eventBus.js'
export default {
  data () {
    return{
      parentMsg: ''
    }
  },
  created () {
    bus.$on('sendMessage',(mes)=>{
      this.parentMsg = mes
    })
  }
  /* 其他代碼 */
}

以上代碼中，通過引入eventBus.js文件創建一個Vue實例，同時在子組件中通過$emit方法向這個Vue實例發送一個名為sendMessage的事件，並將數據作為參數；在父組件中通過$on方法監聽名為sendMessage的事件，並在該函數內對數據進行操作。

四、Vuex方式

Vuex是Vue.js官方提供的一個狀態管理工具，它的核心是將所有組件的數據存儲在一個全局共享的狀態管理中心中。這樣一來，在任意一個組件中都可以通過Vuex來存儲和訪問共享數據，實現組件間的數據共享和通信。

/* store.js */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
    parentMsg: '來自Vuex的消息'
  }
})

export default store;

/* 子組件 A */
export default {
  name: 'childA',
  methods: {
    sendMsgA(){
      this.$store.state.parentMsg = '來自子組件A的消息'
    }
  }
  /* 其他代碼 */
}

/* 子組件 B */
export default {
  name: 'childB',
  methods: {
    sendMsgB(){
      this.$store.state.parentMsg = '來自子組件B的消息'
    }
  }
  /* 其他代碼 */
}

/* 父組件 */
export default {
  name: 'parent',
  /* 其他代碼 */
}

以上代碼中，通過在Vuex的store文件中定義一個state對象來存儲需要共享的數據，並在子組件中通過this.$store.state.屬性名的方式來訪問和修改state中的數據，從而實現父子組件之間的數據共享。

五、總結

在uniapp組件傳值的實現方法中，prop方式適用於父子組件之間的單向數據通信，$emit方式適用於子組件向父組件發送消息，EventBus方式適用於任意組件之間的相互通信，Vuex方式適用於多個組件需要共享數據的情況。通過選擇合適的傳值方式，可以極大地簡化組件間的通信過程，提升開發效率。