[JavaScript知识库]vue兄弟组件传值的方法

vue兄弟组件传值的方法

主要通过event事件来传值:

1. 传值的组件使用$emit发送事件
2. 接受值的组件通过$on绑定事件接受

第一步

• 创建js文件 test.js

  import Vue from 'vue'
  export default new Vue()
  

• 在main.js中注册js文件

  import test from "./plugins/test.js";
  Vue.prototype.$test_js = test
  

第二步

• 在传值的组件使用$emit发送事件

  methods: {
      updateCarCount() {
          this.$test_js.$emit("updateCarCount",5)
      }
  }
  

• 在接受值的组件通过$on绑定事件接受

  mounted() {
      this.$test_js.$on('updateCarCount', (message) => {
          this.carCount = message
      })
  },