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

逃离我推掉我的手 2021-07-26 11:45 397阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3_size_16_color_FFFFFF_t_70][]

子组件代码叫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会报错

解决方法:

<input v-model="requestContentData"/>
    
     props: {
    
        backContentData: {
            type: String,
            default: null
        }
    
    },
    data() {
        return {
            requestContentData: ''
        }
    },
    watch: {
        requestContent(val) {
          this.requestContentData = val
        }
      }

相信大家已经看明白了,对你有帮助请点个赞.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3_size_16_color_FFFFFF_t_70]: /images/20210726/a2a61087543a4be89b0cef5f559bf7be.png

发表评论取消回复

表情：

评论列表（有 0 条评论，397人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-父组件向子组件传值

[子组件向父组件传值，可点击查看][Link 1] 下面示例中是：父组件向子组件的单向数据流父级的更新会向下流动到子组件中，但是反过来则不行。每次父级组件发生更新时，子

太过爱你忘了你带给我的痛/ 2023年07月18日 12:50/ 0 赞/ 122 阅读

相关 vue 父组件向子组件传值

先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

￡神魔★判官ぃ/ 2022年04月17日 04:59/ 0 赞/ 339 阅读

相关 vue 组件：父组件向子组件传值，以及子组件向父组件传值

1.父组件向子组件传值 <!DOCTYPE html> <html> <head> <meta charset='

矫情吗；*/ 2022年03月28日 04:16/ 0 赞/ 359 阅读

相关 Vue.js 父组件向子组件传值和子组件向父组件传值

父组件向子组件传值 1. 组件实例定义方式，注意：一定要使用`props`属性来定义父组件传递过来的数据 <script> // 创建 Vue

た入场券/ 2022年03月16日 20:16/ 0 赞/ 332 阅读

相关 vue子组件向父组件传值

背景 vue实现数据交互之子组件向父组件传值，这里通过点击事件改变父组件的值方法子组件User.vue //点击hello users后改变父组件titl

傷城~/ 2021年12月12日 07:21/ 0 赞/ 401 阅读

相关 vue父组件向子组件传值

背景 vue要进行数据交互，若父组件要向子组件传值要怎么办那方法父组件的标签引用时，添加v-bind，子组件的props接收注册父组件App.vue

￡神魔★判官ぃ/ 2021年12月12日 06:51/ 0 赞/ 351 阅读

相关 Vue子组件向父组件传值

子组件 props: { props:['childdata'], // 定义在父组件中的变量 }, me

太过爱你忘了你带给我的痛/ 2021年09月15日 12:18/ 0 赞/ 499 阅读

相关 vue父组件向子组件传值

子组件 -------------------- <template> <div class="timeline" > <div v-for=" data in c

以你之姓@/ 2021年09月15日 12:12/ 0 赞/ 529 阅读

相关 vue $emit 子组件向父组件传值

子组件通过$emit传递数值  <template> <view class="leave_cont

深藏阁楼爱情的钟/ 2021年09月07日 06:06/ 0 赞/ 513 阅读

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

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

逃离我推掉我的手/ 2021年07月26日 11:45/ 0 赞/ 398 阅读