vue中组件数据回显后无法清空

最新推荐文章于 2024-07-25 14:00:48 发布

qi0805

最新推荐文章于 2024-07-25 14:00:48 发布

阅读量2.1k

点赞数

文章标签： vue html5 javascript

本文链接：https://blog.csdn.net/qi0805/article/details/110368149

版权

本文介绍了在Vue中，子组件无法直接修改父组件传来的值的问题，并提出了两种解决方案。一是通过深拷贝父组件传入的值在子组件内部操作；二是利用$emit通知父组件来改变值，实现父子组件间的通信。这两种方法确保了数据的正确流动和状态管理。

摘要由CSDN通过智能技术生成

    这种情况一般出现在  父组件  传值给  子组件，我们通过props接收子组件的值，在子组件内进行回显，回显完成后进行清空，发现清空不了。在这种时候我们要记住在子组件是不能更改父组件的值的。
    有两种方法可以帮助我们清空这个值。
    1：比较暴力的方法，我们将从父组件获取到的值重新深复制一份，在子组件里使用新的数据，这样就可以清空值了。
    created() {
		this.selectObj = JSON.parse(JSON.stringify(this.formInline))
    },
    2：在子组件更改时通过一个方法告知父组件，让父组件进行更改，这样传到子组件的值就会相应更改。这涉及到父子组件通信。
    父子间通信：（父传子）
    父组件：<operate
    		    :isOperat="flag"
    		    :formInline="dataadd"s"
  		  ></operate>
    子组件：props: {
		  	    isOperat: String,
		  	    formInline: Object,
		  }
   （子传父）
     子组件：
        <input @click="sendMsg" type="button" value="给父组件传递值">
            方法：sendMsg(){
     //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
                       this.$emit('func',this.msg)
      }
     父组件：<child @func="getMsgFormSon"></child>
			方法：getMsgFormSon(data){
					   this.msgFormSon = data
					   console.log(this.msgFormSon)
      }