vue父组件向子组件传值子组件用的是v-mode报的错误

最新推荐文章于 2025-02-23 11:30:00 发布

原创

最新推荐文章于 2025-02-23 11:30:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue父组件向子组件传值子组件用的是v-mode报的错误

Vue组件间的通信通常遵循单向数据流原则。在尝试使用v-model从父组件向子组件传递值时，可能会遇到错误。问题在于频繁点击按钮导致的数据更新冲突。解决这个问题的方法是正确处理父子组件通信，避免直接在子组件中使用v-model。通过设置props并监听事件来实现数据传递，从而避免错误的发生。

首先你要知道Vue组件间传值，默认遵循单向下行绑定原则

子组件代码叫ceshi:

    <input v-model="backContentData"/>

 props: {

    backContentData: {

        type: String,
        default: null
    }

}

父组件代码:

<template>
    <ceshi :back-content-data ="backContentData">
    <button @click="btn()"/>
<template>
<script>
export default {
    data() {
        return {
            backContentData: ''
        
        }
    },
  created() {
    this.find()
  },
    methods: {
        find(){
         this.backContentData = 'aaaa'
        },
        btn() {
            this.backContentData = 'bbb'
        }
    }

}
</script>

如果频繁的点击btn会报错

解决方法: