v-model在组件中如何使用？
v-model在组件中的使用我感觉就是一个传值的过程，vue在传值过程中方式也还是比较多的，像是event或者props等，但是不太熟悉v-model在组件中应该如何使用...
v-model在组件中的使用我感觉就是一个传值的过程，vue在传值过程中方式也还是比较多的，像是event或者props等，但是不太熟悉v-model在组件中应该如何使用。
展开
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。by三人行慕课
实现点击回应后，父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了，实现通信。
<!-- 父组件 --> <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。by三人行慕课
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
ZESTRON
2024-09-04 广告
表面污染分析包括评估表面上存在的颗粒、残留物或物质。通过利用显微镜、光谱学和色谱法等技术，分析人员可以识别和表征污染物，以确定其成分和来源。这种分析在电子、制药和制造等各个行业中至关重要，以确保产品质量、性能和安全性。了解表面污染有助于实施...
点击进入详情页
本回答由ZESTRON提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
