この記事の内容は、Vue コンポーネント内で双方向のデータ バインディングを実装するコード例に関するものです。一定の参考価値があります。必要な友人が参考にしていただければ幸いです。あなたにとって役に立ちます。
アイデア: 親コンポーネントは props を介して子コンポーネントに値を渡し、子コンポーネントは $emit を使用して、対応する props 値を変更するように親コンポーネントに通知します。具体的な実装は次のとおりです:
import Vue from 'vue' const component = { props: ['value'], template: ` <div> <input type="text" @input="handleInput" :value="value"> </div> `, data () { return{} }, methods: { handleInput (e) { this.$emit('input', e.target.value) } } } new Vue({ components: { CompOne: component }, el: '#root', template: ` <div> <comp-one :value1="value" @input="value = arguments[0]"></comp-one> </div> `, data () { return{ value: '123' } } })
[関連する推奨事項: JavaScriptVideoTutorial]
以上がVue コンポーネント内に双方向データ バインディングを実装するコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。