求问我该如何使用v-model组件?

v-model在组件中的使用我感觉就是一个传值的过程,vue在传值过程中方式也还是比较多的,像是event或者props等,但是不太熟悉v-model在组件中应该如何使用。

宝慕林4294392
浏览 537回答 1
1回答

莫回无

v-model在组件中如何使用。实现点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。<!-- 父组件 --> <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 会把 value 用作 prop 且把 input 用作 event。
打开App,查看更多内容
随时随地看视频慕课网APP