Vueはよく値の方式を伝えて、父は子を伝えて、子は父と子の実例の分析を伝えます。
本論文の実例はVueの一般的な伝値方式、父伝子、子伝父及び非父子について述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
親コンポーネントがサブアセンブリに値を送るのはpropsを利用することです。
サブコンポーネントの注意事項:props:[greetMsg]は、プロpsの後に[]配列が複数の値を受信することができますが、{}ではありません。
またここのグリーンMsgはグリーン-msgでエラーを報告しますので、猫峰法で命名してください。
親子以外のコンポーネントを転送します。
親子以外のコンポーネント間の値の転送は、共通のインスタンスファイルbus.jsを定義する必要があります。 倉庫間で値を送ります。そうでないと、ルーティング・コンポーネント間で送信値の効果が得られません。
ここで述べたように、皆さんのvue.jsプログラムの設計に役に立ちます。
親コンポーネントがサブアセンブリに値を送るのは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プログラムの設計に役に立ちます。