Vue コンポーネント内に双方向データ バインディングを実装するコード例

この記事の内容は、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 サイトの他の関連記事を参照してください。