巧用Vue 父组件通过Prop向子组件传值

巧用Vue 父组件通过Prop向子组件传值

先看下vue官方的说法：

总结来说：Prop是单向数据流。只能父传子，子不可以传父。但是有一种情况子可以直接传父，而且无报警。

// 父组件
<template>
  <div>
    //父向子传值<br>
    父组件：<input type="text" v-model="title">
    <child :title=title></child>
  </div>
</template>
<script>
import Child from "./Child"
export default {
  data(){
    return{
      title:"张三"
    }
  },
  components:{
   "child":Child,
  },
  methods:{
    
  }
}
</script>

---

// 子组件
<template>
  <div>
    // 子组件
    <h2>{{title}}</h2>
    子组件：<input type="text" v-model="title">
  </div>
</template>
<script>
export default {
  data() {
    return {
      childTitle:this.title
    }
  },
  props:{
    title:{
      type:String,
      require:true
    }
  },
  methods:{
    
  }
}
</script>

官方推荐子组件最好定义一个本地的data属性用来接收prop传过来的值。然后对本地data值进行操作处理，再通过$emit命令，将改变的值发送给父组件，实现父子组件通信。
在开发中，如果我们仅仅是通过子组件展示父组件传过来的数据，并不会对数据进行操作，我们可以直接把prop传过来的值直接绑定页面展示即可，这样，父组件值的更改，子组件可实时展示。
如果子组件本地data接收prop的值，这样父组件值的更改，子组件无法获知，这样可以通过watch监听prop数据的变化。
看如上代码，如果我们页面绑定prop数据，直接改变值，则页面报错。

vue不允许子组件直接改变父组件的值。
接下来，我们换下数据类型对上面的代码稍稍改动再看下。

// 父组件
<template>
  <div>
    //父向子传值<br>
    父组件：<input type="text" v-model="title.name">
    <child :title=title></child>
  </div>
</template>
<script>
import Child from "./Child"
export default {
  data(){
    return{
      title:{
        name:'张三'
      }
    }
  },
  components:{
   "child":Child,
  },
  methods:{
    
  }
}
</script>

---

// 子组件
<template>
  <div>
    // 子组件
    <h2>{{title.name}}</h2>
    子组件：<input type="text" v-model="title.name">
  </div>
</template>
<script>
export default {
  data() {
    return {
      childTitle:this.title
    }
  },
  props:{
    title:{
      type:Object,
      require:true
    }
  },
  methods:{
    
  }
}
</script>

我们将prop传输的数据类型改为Object，在子组件直接更改prop传过来的值页面并不会报错。这是为何？

因为Object是引用数据类型，父子组件绑定的同一个堆内存中的对象。

这可以作为一个父子组件双向通信的简易方案。