关于vue子组件改变父组件传递的值的问题

正常对于vue父子组件来说子组件是不能改变父组件props过来的值的，但是今天在做项目的时候发现了一个有意思的事情，子组件是可以直接通过改变props的值来改变父组件相对应数据的值的。

这里我们将props的值的类型分为3种（字符串，数组，对象）

先说对象吧

子组件直接改变父组件props过来的对象是可以直接更新父组件的数据的而且不会报错。

子组件：
<template> 
<div class="hello"> 
{{msg.test}}
 <input type="text" v-model="msg.test" placeholder="子组件input"> 
</div> 
</template> 
<script> export default { 
name: 'HelloWorld', 
props: { msg: Object }
 } 
</script>
父组件
<hello :msg="msg"></hello>
 <div></div> 
<div>{{msg.test}}</div>

data() { 
return { 
name: null, 
sex: null,
 url: null,
 msg: { test: '你好' } 
} 
},

数组也是没有问题的

子组件
<template>
  <div class="hello">
    <div @click="deleteItem(index)" v-for="(item,index) in msg">{{item}}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: Array
  },
  methods: {
    deleteItem (index) {
      this.msg.splice(index,1)
      console.log('删除了一个')
    }
  }
}
</script>
父组件
<hello :msg="msg"></hello>
<div v-for="(item,index) in msg">{{item}}</div>

data() {
      return {
        name: null,
        sex: null,
        url: null,
        msg: [1,2,3,4,5,6,7]
      }
    },

字符串前面数组和对象都是没问题的但是到了字符串却会报错

子组件
<template>
  <div class="hello">
    <div>
      子组件的：<input type="text" v-model="msg">
      <div>子组件的：{{msg}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
父组件
<div>
   父组件的：<input type="text" v-model="msg">
   <div>父组件的：{{msg}}</div>
</div>
data(){
   return{
       msg: '你好'
   }
}

当通过父组件改变msg的时候是完全没有问题的，但是当想通过子组件直接改变父组件传过来的msg却报了上面的错误。
大致的意思是避免直接改变道具，因为只要父组件重新渲染，该值就会被覆盖。而是根据prop的值使用数据或计算属性。支持变异：“msg”。

没错我的英语不可能这么好，我是用的翻译软件o(╥﹏╥)o

字面意思很清楚了解决办法是将msg赋值给一个子组件自定义的参数，然后通过这个自定义的参数来改变子组件msg（不能改变父组件的）
又或者是通过$emit和$on来改变父组件msg的值https://blog.csdn.net/qq_40816649/article/details/83274198

总结

以后如果再碰到类似，父组件传对象或者数组值到子组件中进行更新，然后将改变的值返回父组件的场景时，可以不用$emit和$on这种方式来实现了，直接改变数据就行了。

关于vue子组件改变父组件传递的值的问题

猜你喜欢