2019-05-07 vue 父子组件互相传值容易出现的报错

对于父子组件之间的互相传值,报错如下:

[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: "propTextTip"

大概意思是:避免直接更改一个PROP,因为每当父组件重新呈现时,该值就会被覆盖。

image

解决办法:

不要直接引用父组件传过来的值,可以把接收到的父组件的值赋值给一个新的参数

<template>
  <div>
    <span>子组件</span>
    <input type="text" name="" v-model.trim="textTip">
    <button type="button" class="btn btn-success btn-xs" v-on:click="callFather">通知父组件</button>
  </div>
</template>
<script>

export default {
  data() {
    return {
      textTip:this.propTextTip
    }
  },
   props:['propTextTip'],
  methods:{
      callFather:function() {
          //发射信号
          console.log(this.textTip);
          this.$emit('getCalled',this.textTip);
          //其中 getCalled 是一个自定义的事件,功能类似于一个中转
      }
  }
}
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容