This time I will bring you how to operate vue to enable v-model in a custom component, and how to operate vue to enable v-model in a custom componentNotes What are they? Here are actual cases. Let’s take a look.
v-model directive
The so-called "directive" actually extends theHTML tag function (attribute).
Let’s start with a component, without vue-model, normal father-son communication<!-- 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>
Switch to 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
There is this sentence: By default, v-model on a component will use value as prop and input as event. Try changing the example of the sub-component above, and it will work.<!-- 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>
Let’s summarize:
If you are lazy and don't want to handle events yourself, then use the default 'value' && 'input' events. If you use native events, even the model attribute can be omitted. If you want your code to be clearer and distinguish custom events, then the following combination is your cup of tea. It depends on your own mood to define prop and event. Of course, you need to know your opinion [try to avoid keywords]model: { prop: 'someProp', // 注意,是prop,不带s。我在写这个速记的时候,多写了一个s,调试到怀疑人生 event: 'someEvent' } this.$emit('someProp', [returnValueToParent])
How to use WebPack to configure vue multi-page
How to use webpack to build a react development environment
The above is the detailed content of How to operate vue to enable v-model in a custom component. For more information, please follow other related articles on the PHP Chinese website!