【vue开发基础】vue组件如何使用v-model进行数据交互

❤ 写在前面

如果觉得对你有帮助的话，点个小❤❤ 吧，你的支持是对我最大的鼓励~

之前面试的时候，碰到一个面试题，要求是手写一个组件要使用v-model进行数据绑定，请看下面代码，相信你一看就懂。

---

（1）创建一个父组件，使用v-model进行数据的绑定，它会将v-model的参数值传给子组件，子组件可以通过props接收到父组件传递的值。 这一点跟之前的参数传值一样，最主要的是子组件参数值改变时，将值传递给父组件。

<template>
    <div>
        <div>父组件：{{num}}</div>
        <tryCom v-model="num"></tryCom>
    </div>
</template>

<script>
import tryCom from './try.vue'
export default{
    components:{
        tryCom
    },
    data() {
        return{
            num: 1
        }
    },
}
</script>

<style scoped>
</style>

---

（2）创建子组件，通过props接收父组件的参数，当子组件这个参数发生变化时，通过emit去通知父组件，这里只需要添加model就可以实现v-model的双向绑定了。model里有两个参数，prop和event。prop就是v-model绑定的参数名，event就是emit里通知父组件的方法名。这样就搞定了，下面的代码可以直接导入到项目进行使用，亲测有效。

<template>
    <div>
        <div>子组件：{{num}}</div>
        <el-button type="success" @click="add">num值加一</el-button>
    </div>
</template>

<script>
export default{
    props:{
        num:{
            type:Number,
            default:0
        }
    },
    model:{
        prop:"num",
        event:"add"
    },
    data() {
        return{

        }
    },
    methods:{
        add(){
            this.$emit('add', ++this.num);
        }
    }
}
</script>

<style scoped>
</style>

❤ 总结

Thanks♪(･ω･)ﾉ，到此就结束了，有什么问题都可以问！
欢迎评论 / 私信我~