Vue基础知识——v-model原理自定义v-model

最新推荐文章于 2025-02-27 00:30:35 发布

qq_28695495

最新推荐文章于 2025-02-27 00:30:35 发布

阅读量595

点赞数

文章标签：前端 javascript java

本文链接：https://blog.youkuaiyun.com/qq_28695495/article/details/127218340

版权

本文介绍了Vue.js框架中v-model指令的工作原理。通过实例演示了如何手动实现v-model效果，并展示了如何在自定义组件中使用v-model进行双向数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、手动实现v-model。以下第一段代码是第二段代码的语法糖。

<input type="text" v-model="va" />

等价于

<input type="text" :value="va" @input="va = $event.target.value" />

2、自定义v-model。

关键点：

1）在调用子组件的标签中使用v-model。根据语法糖可知，意味着向子组件中传了一个变量。

2）在子组件中接收父组件传过来的变量。

3）在子组件model中的prop属性中写上变量名称，与父组件传过来的变量名称一致。

4）在子组件model中的event中写上时间名称。要与$emit触发的事件名称一致。

//父组件代码
// 父组件代码
<template>
  <div id="app">
    <div>父组件：{{parentData}}</div>
    <model-demo-vue v-model="parentData"></model-demo-vue>
  </div>
</template>

<script>
import modelDemoVue from './components/model-demo.vue';
export default {
  name: 'App',
  components: {
    modelDemoVue
  },
  data() {
    return {
      parentData: 'hello'
    }
  },  
  methods: {
  }
}
</script>

<style>


</style>
——————————————————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————————————————

//子组件代码
<template>
<div>
    子组件输入框：<input type="text" :value="parentData" @input="$emit('change',$event.target.value)">
</div>
</template>
<script>
export default {
    name: 'modelDemo',
    model: {
        prop:['parentData'],
        event:['change']
    },
    props: {
        parentData: {
            type:String,
            default() {
                return ''
            }
        }
    },
    data() {
        return {
            text:'123'
        }
    },
}

</script>
<style></style>