vue のカスタムコンポーネントで v-model を使用する手順の詳細な説明-jsチュートリアル-php.cn

vue のカスタムコンポーネントで v-model を使用する手順の詳細な説明

php中世界最好的语言

リリース： 2018-05-21 14:55:10

オリジナル

2402 人が閲覧しました

今回は、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>

ログイン後にコピー

<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 サイトの他の関連記事にも注目してください。

推奨読書:

vue はカスタムアイコンのステップ分析を使用します

vue-cli プロジェクトは Mockjs のステップ分析を使用します

以上がvue のカスタムコンポーネントで v-model を使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。