Vueの中の異なる構成要素間のパス値の方法

親コンポーネントサブアセンブリに値を渡します

伝統的な価値観の親コンポーネントにサブアセンブリ

息子は、非コンポーネントとの間の値を渡します

非域成分との間の息子値を、従来の値の中間リポジトリとして、共通のインスタンスを公開ファイルbus.jsを定義する、またはコンポーネントの値をルーティング間の効果を渡すために失敗する必要があります。

公共bus.js

//bus.js
import Vue from 'vue'
export default new Vue()

成分A：child1.vue

<template>
    <div>
        A组件:
        <span>{{elementValue}}</span>
        <input type="button" value="点击触发" @click="elementByValue">
    </div>
</template>
<script>
    // 引入公共的bug，来做为中间传达的工具
    import Bus from '../bus/bus.js'
    export default {
        name: "child1",
        data () {
            return {
                elementValue: 4
            }
        },
        methods: {
            elementByValue: function () {
            //重点代码：A组件将值传给B组件
                Bus.$emit('val', this.elementValue)
            }
        }
    }
</script>

<style scoped>
</style>

コンポーネントB：child2.vue

<template>
  <div>
    B组件:
    <input type="button" value="点击触发" @click="getData">
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted: function () {
      var vm = this
      // 用$on事件来接收A组件传给B组件的参数
      Bus.$on('val', (data) => {
        console.log(data)
        vm.name = data
      })
    },
    methods: {
      getData: function () {
        this.name++
      }
    }
  }
</script>

参考リンク：https://blog.csdn.net/lander_xiong/article/details/79018737