vue自定义组件中实现v-model
其实在vue的组件中实现v-model指令的方法就是父子组件传值的方法，只不过不用特别去父组件定义事件罢了，实现方式（不是方法）有两种：
1.vue中默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event
//子组件test.vue
<template><div><p>{{value}}</p><button @click="changeVal"></button></div>
</template>
<script>
export default {props: ['value'],methods: {changeVal () {this.$emit('input', '我在子组件修改了text')}}
}
</script>
父组件中代码：
//在父组件中引用test.vue并使用该组件
//因为v-model默认会将input作为事件，所以不需要再父组件定义事件
<Test v-model="text"></Test>
2.使用vue的model选项，这个在vue文档中有说明：model选项
以1里面的例子来说：
//子组件test.vue
<template><div><p>{{qwe}}</p><button @click="changeVal"></button></div>
</template>
<script>
export default {props: ['qwe'],model: {//model选项可以自定义prop名称和event名称prop: 'qwe',event: 'changeQwe'},methods: {changeVal () {this.$emit('changeQwe', '我在子组件修改了text')}}
}
</script>
引用组件：
//因为使用model选项可以直接在自定义组件中定义prop和event,所以也不需要特别在父组件定义event
<Test v-model="text"></Test>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！