自定义v-model事件

最新推荐文章于 2024-01-29 11:28:23 发布

原创最新推荐文章于 2024-01-29 11:28:23 发布 · 3.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue.js

收录于

VUE技术栈专栏收录该内容

12 篇文章

订阅专栏

本文探讨了Vue中父组件与子组件间通过自定义vModel实现的双向数据绑定机制。具体分析了如何在子组件中使用:value与@input事件来与父组件交互，确保数据同步更新。

父组件

<template>
  <div class="home">
    <p>{{name}}</p>
    <v-model v-model="name"></v-model>
  </div>
</template>
<script>
import vModel from '@/components/HelloWorld'
export default {
  name: 'home',
  components: {
    vModel,
  },
  data() {
    return {
      name: '张三',
    }
  },
  methods: {
  },
}
</script>

子组件

<template>
  <input type="text" :value="text" @input="$emit('change',$event.target.value)" />
</template>

<script>
/**
 * input使用了:value而不是v-model
 * change和 model change要对应
 * text属性对应
 */
export default {
  model: {
    prop: 'text',
    event: 'change',
  },
  props: {
    text: String,
    default() {
      return ''
    },
  },
}
</script>
<style scoped lang="stylus"></style>