ホームページ > ウェブフロントエンド > jsチュートリアル > Vue コンポーネント内に双方向データ バインディングを実装するコード例

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

不言
リリース: 2019-04-04 10:55:11
転載
2027 人が閲覧しました

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

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート