父子组件通信问题

父子组件通信需要注意的问题

• 父子组件的关系可以总结为：prop向下传递，事件向上传递。意思是父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息

特别注意两点

1. 不应该在子组件内部改变prop，这样会破坏单向的数据绑定，导致数据混乱。
2. 如果props传递的是引用类型，利用这一点（浅拷贝）就能够实现父子组件数据的’双向绑定’，虽然这样可以实现效果，但是会牺牲数据流向，导致代码难以理解，最好不要这么做。

• home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld :msg="change"  :num='num' />
    <he :msg="change" :num='num'/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import he from '@/components/he.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld,
    he
  },
  data(){
    return{
      change:{
        name:1,
        age:2,
        sex:3
      },
      num:100
    }
  }
}
</script>

• HelloWorld.vue （重新操作父组件传过来的对象）

<template>
  <div class="hello" ref='hello'>
    {{center}}
    {{num}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: Object,
    num:Number,
  },
  data(){
    return{
      center:''
    }
  },
  mounted(){
  	//this.msg={} //报错
  	//正确操作
    this.center=JSON.parse(JSON.stringify(this.msg)) // 浅拷贝转化为深拷贝
    this.center.name=1111 //重新赋值
	
	//基本数据类型通过直接在子组件修改值，虽然可以实现‘双向数据绑定’，但是会牺牲数据流向
    this.num=500 //不建议这么做
  },
  computed:{
    
  }
}
</script>