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>
默认情况下,一e5a48de588b662616964757a686964616f31333431373231个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。