vueを操作してカスタムコンポーネントでv-modelを有効にする方法

今回は、vue を操作してカスタム コンポーネントで v-model を有効にする方法と、vue を操作してカスタム コンポーネントで v-model を有効にするときの注意事項について説明します。以下は実際的なケースです。見てください、見てください。

v-modelディレクティブ

いわゆる「コマンド」は、実際には

HTMLタグの機能(属性)を拡張します。

最初にコンポーネントが登場します。vue-model は使用せず、通常の父と息子のコミュニケーションです

<!-- parent -->
<template>
<p class="parent">
  <p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
  <Child @returnBack="turnBack" :give="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  },
  methods: {
    turnBack(val) {
      this.sthGiveChild = val;
    }
  }
}
</script>

<!-- child -->
<template>
<p class="child">
  <p>我是儿子，父亲对我说： {{give}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    give: String
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>

クリックして応答すると、父親が息子に言ったことは息子の応答になります。息子が受け取る情報も変わり、コミュニケーションが可能になった。

v-modelに切り替えてください

<!-- parent -->
<template>
<p class="parent">
  <p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
  <Child v-model="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  }
}
</script>

<!-- child -->
<template>
<p class="child">
  <p>我是儿子，父亲对我说： {{give}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    give: String
  },
  model: {
    prop: 'give',
    event: 'returnBack'
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>

コピーライティングは異なりますが、結果は最終的には同じです。

公式カスタムコンポーネントの v-model を見てください

公式の例

https://vuefe.cn/v2/api/#model

次の文があります: デフォルトでは、コンポーネントの v-model は、プロパティとして値を使用し、イベントとして入力を使用します。

上記のサブコンポーネントの例を変更してみてください。うまくいきます

<!-- child -->
<template>
<p class="child">
  <p>我是儿子，父亲对我说： {{value}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    value: String
  },
  methods: {
    returnBackFn() {
      this.$emit('input', '还你200块');
    }
  }
}
</script>

要約しましょう:

面倒でイベントを自分で処理したくない場合は、デフォルトの「値」を使用してください。 && ' input' イベントを処理します。ネイティブ イベントを使用する場合は、model 属性も省略できます。

コードをより明確にしてカスタム イベントを区別したい場合は、次の組み合わせが最適です。

プロップとイベントは自分の気分によって決まります。もちろん、自分の意見を知る必要があります[キーワードを避けるようにしてください]

model: {
prop: 'someProp', // 注意，是prop，不带s。我在写这个速记的时候，多写了一个s，调试到怀疑人生
event: 'someEvent'
}
this.$emit('someProp', [returnValueToParent])

この記事の事例を読んだ後は、その方法を習得したと思います。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

WebPack を使用して vue マルチページを構成する方法

WebPack を使用して React 開発環境を構築する方法

以上がvueを操作してカスタムコンポーネントでv-modelを有効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。