uniapp组件传值实现方法

小蓝 • 2024-12-15 12:15 • 编程

一、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方式适用于多个组件需要共享数据的情况。通过选择合适的传值方式，可以极大地简化组件间的通信过程，提升开发效率。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/255133.html