自定义组件v-model使用的详细介绍和复杂使用

自定义组件v-model

原理分析

v-model = data

等价于

:value = “data”

@input = ()=>{this.data = $event.target.newValue}

如果要使用，整个双向绑定的过程如下

子组件中触发某个事件，发送了input事件和value新的值给父组件

父组件接受input事件，并将里面的新的值赋值给data

以此依靠v-bind完成对value的改变。

也就是说仍然是父组件先改变。

简单例子:

//子组件Tesy

<template>
 <div>
   <span>{
  {data}}</span>
   <button @click="change">修改data</button>
 </div>
</template>

<script>
export default {
  name: 'Tesy',
  props: {
    data:String
  },
  methods:{
    change(){
      this.$emit('change', "我被修改了");
    }
  },
    // 控制v-modal监听的数据和事件
  model: {
    prop: 'data',
    event: 'change'
  },


}
</script>

<style scoped>

</style>