自定义组件v-model的用法

QQmm~~

于 2022-01-04 21:42:59 发布

阅读量461

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/windmilljan/article/details/122312326

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文讲述了如何正确使用Vue自定义组件中的v-model属性，避免Vue警告，并提供了一个实例，展示了如何将父组件的msg属性绑定到子组件msgOutput，以确保数据同步和避免直接修改prop的错误。

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

使用自定义组件v-model时，碰到这个报错：
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated

搞了半天终于明白怎么用了，郁闷！以下才是正确的：

Mycomponent.vue

<template>
  <el-autocomplete
    v-model="msgOutput"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @select="handleSelect"
    @change="handleSelect"
  ></el-autocomplete>
</template>

<script>
export default {
  name: 'Mycomponent',
  model: {
    prop: 'msg',
    event: 'handleSelect'
  },
  props: {
    msg: String
  },
  data() {
    return {
      msgOutput: ''
    }
  },
  created() {
    this.msgOutput = this.msg
  },
  methods: {
    querySearch(queryString, cb) {
      cb([
        { value: '三全鲜食（北新泾店）' },
        { value: 'Hot honey 首尔炸鸡（仙霞路）' },
        { value: '新旺角茶餐厅' }
      ])
    },

    handleSelect() {
      this.$emit('handleSelect', this.msgOutput)
    }
  }
}
</script>

index.html

<Mycomponent v-model="msg"></Mycomponent>