Vue で双方向バインディングを実装するにはどのような方法がありますか?

Vue は双方向バインディングを実装します: 1. v-model 命令を使用してバインディングを実装します。カスタム コンポーネントの v-model は、modelValue プロパティを渡し、スローされた update:modelValue イベントを受け取ることと同等です。2 、vue-better-sync プラグインを使用してバインディングを実装します; 3. v-bind.sync 修飾子を使用します。構文は「」です。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

双方向バインディングを実装するためのいくつかのメソッドを用意します

1. v-model ディレクティブ

<childcomponent></childcomponent>

<!-- 是以下的简写: -->

<childcomponent></childcomponent>

次の場合属性を追加するか、イベント名が別の名前に変更される場合は、ChildComponent コンポーネントに

model オプションを追加する必要があります。

<!-- ParentComponent.vue -->

<ChildComponent v-model="pageTitle" />

// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

したがって、この例では、v-model は次の省略形です。

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

Vue 3.x では、カスタム コンポーネントの v-model は、modelValue prop を渡し、スローされた update:modelValue## を受け取ることと同等です。 # イベント: <pre class="brush:js;toolbar:false;">&lt;ChildComponent v-model=&quot;pageTitle&quot; /&gt; &lt;!-- 是以下的简写: --&gt; &lt;ChildComponent :modelValue=&quot;pageTitle&quot; @update:modelValue=&quot;pageTitle = $event&quot; /&gt;</pre>

Vue3

複数の v-model をバインドできます。例: <childcomponent v-model:title='pageTitle"' v></childcomponent>

2、vue-better-sync プラグイン

これには需要があります: 開発a ユーザーの Enter キーを同期するようコンポーネントに要求し、ボタンをクリックしてポップアップ ウィンドウを閉じます。

通常はこれを行います:

<template>
  <div v-show="_visible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名？</div>
      <input v-model="_answer" />
    </div>
    <div>
      <button @click="_visible = !_visible">确认</button>
      <button @click="_visible = !_visible">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  name: &#39;prompt&#39;,
  
  props: {
    answer: String,
    visible: Boolean
  },
  
  computed: {
    _answer: {
      get() {
        return this.answer
      },
      set(value) {
        this.$emit(&#39;input&#39;, value)
      }
    },
    _visible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit(&#39;update:visible&#39;, value)
      }
    }
  }
}
</script>

コンポーネントを 1 つまたは 2 つ記述しても問題ありません。コンポーネントのサイズが拡張されたら、双方向で記述します。バインディングは実際に問題を引き起こす可能性があります。そこで、生産性を解放するために、vue-better-sync ホイールを使用しました。これを使用して Prompt コンポーネントを変換する方法を見てみましょう:

<template>
  <div v-show="actualVisible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名？</div>
      <input v-model="actualAnswer" />
    </div>
    <div>
      <button @click="syncVisible(!actualVisible)">确认</button>
      <button @click="syncVisible(!actualVisible)">取消</button>
    </div>
  </div>
</template>

<script>
import VueBetterSync from &#39;vue-better-sync&#39;

export default {
  name: &#39;prompt&#39;,
  
  mixins: [
    VueBetterSync({
      prop: &#39;answer&#39;, // 设置 v-model 的 prop
      event: &#39;input&#39; // 设置 v-model 的 event
    })
  ],
  
  props: {
    answer: String,
    visible: {
      type: Boolean,
      sync: true // visible 属性可用 .sync 双向绑定
    }
  }
}
</script>

vue-better-sync は v-model と .sync を統合しますdata.メソッドを使用して、新しいデータを親コンポーネントに渡すには、 this.actual${PropName} = newValue または this.sync${PropName}(newValue) のみが必要です。

GitHub:

fjc0k/vue-better-sync

3. In で v-bind.sync 修飾子

を使用します。場合によっては、特定の

prop

に対して「双方向バインディング」を実行する必要がある場合があります (v-model を使用してプロップをバインドする前述のケースを除く)。これには、update:myPropName スロー イベントを使用することをお勧めします。たとえば、前の例の title prop を持つ ChildComponent の場合、次の方法で親に新しい値を割り当てる意図を伝えることができます: <pre class="brush:php;toolbar:false">this.$emit('update:title', newValue)</pre> 必要に応じて、親はイベントをリッスンできます。ローカル データ プロパティを更新します。例:

<childcomponent></childcomponent>

便宜上、.sync 修飾子を使用して次のように省略できます:

<ChildComponent :title.sync="pageTitle" />

vue3 Remove

.sync

[関連する推奨事項:

vuejs ビデオ チュートリアル

、Web フロントエンド開発]

以上がVue で双方向バインディングを実装するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。