Vueはよく値の方式を伝えて、父は子を伝えて、子は父と子の実例の分析を伝えます。


本論文の実例はVueの一般的な伝値方式、父伝子、子伝父及び非父子について述べている。皆さんに参考にしてあげます。具体的には以下の通りです。

親コンポーネントがサブアセンブリに値を送るのはpropsを利用することです。
サブコンポーネントの注意事項:props:[greetMsg]は、プロpsの後に[]配列が複数の値を受信することができますが、{}ではありません。
またここのグリーンMsgはグリーン-msgでエラーを報告しますので、猫峰法で命名してください。
親子以外のコンポーネントを転送します。
親子以外のコンポーネント間の値の転送は、共通のインスタンスファイルbus.jsを定義する必要があります。 倉庫間で値を送ります。そうでないと、ルーティング・コンポーネント間で送信値の効果が得られません。

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


//  A:
<template>
 <div>
  A  :
  <span>{{elementValue}}</span>
  <input type="button" value="    " @click="elementByValue">
 </div>
</template>
<script>
 //      bug,          
 import Bus from './bus.js'
 export default {
  data () {
   return {
    elementValue: 4
   }
  },
  methods: {
   elementByValue: function () {
    Bus.$emit('val', this.elementValue)
   }
  }
 }
</script>


//  B:
<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       
   Bus.$on('val', (data) => {
    console.log(data)
    vm.name = data
   })
  },
  methods: {
   getData: function () {
    this.name++
   }
  }
 }
</script>

Vueでよく使われている値の伝え方を紹介しました。何か分からないことがあれば、コメントをお願いします。
ここで述べたように、皆さんのvue.jsプログラムの設計に役に立ちます。