ホームページ > 記事 > ウェブフロントエンド > 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>
コピーライティングは異なりますが、結果は最終的には同じです。
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 サイトの他の関連記事を参照してください。