Vue2组件间通信——父传子值props

Vue2中组件间通信系列，本篇是关于父组件向子组件传值的介绍，这里我会用通俗的语言帮助大家理解props配置项

---

功能：

子组件可以接收到父组件传递的数据信息，适用于组件间通信，对于父传子props配置相相对来说是较为方便的

---

传递方式：

<template>
  <div>
    <Son :msg="Str" :Job='job'/>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name:'Father',
  data(){
    return{
      Str:'hello',
      job:{
        salary:'30k'
      }
    }
  },
  components:{
    Son
  }
}
</script>

传递方式很简单，只需在子组件中传入父组件想传递的信息即可，msg和Job是我们的自定义写法，不过要注意的是在前面要加v-bind指令，
不然“ ”中的值会被当做字符串传入Son组件中

---

接受方式：

• 数组类型的接收方式

export default {
  name:'Son',
  props:['msg','Job'],
  mounted(){
    console.log(this.msg)
    console.log(this.Job)
  }
}

打印结果：

hello

{__ob__: Observer}
salary: "30k"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get salary: ƒ reactiveGetter()
set salary: ƒ reactiveSetter(newVal)
[[Prototype]]: Object

用数组的形式来接收传递过来的信息看起来起来像是傻瓜形式的接受，因为我们并没有对接受结果做限制。我们可以看到在钩子里可以使用this来拿到数据，所以说传递过来的信息也是在组件实例身上的。

• 带有限制的接收方式

export default {
  name:'Son',

  props:{
    msg:{
      type:String,      //类型
      required:false,   //是否必填
      default:'你好'     //默认值
    },
    Job:Object			//简写
  },

  mounted(){
    console.log(this.msg)
    console.log(this.Job)
  }
}

打印结果：

你好

{__ob__: Observer}
salary: "30k"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get salary: ƒ reactiveGetter()
set salary: ƒ reactiveSetter(newVal)
[[Prototype]]: Object

相比于数组类型接收数据，采用配置对象的形式来接收数据可以很好地限制父组件传递过来的数据信息。上面在父组件中并没有传递msg，所以
msg打印出的结果是配置项中的默认值 你好

这里我们可能有个疑问，父向子传递数据之后 子组件会永久存储着传递过来的数据吗？对于不同的父组件呢？

<template>
  <div>
    <Father/>
    <Son :msg="Str2" :Job="myjob"/>
  </div>
</template>

<script>
import Father from './components/Father.vue'
import Son from './components/Son.vue'

export default {
  name:'App',
  data(){
    return{
      Str2:'world',
      myjob:{
        salary:'10k'
      }
    }
  },
  components:{
  Father,
  Son
  }
}
</script>

打印结果：

你好

{__ob__: Observer}
salary: "30k"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get salary: ƒ reactiveGetter()
set salary: ƒ reactiveSetter(newVal)
[[Prototype]]: Object

world

{__ob__: Observer}
salary: "10k"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get salary: ƒ reactiveGetter()
set salary: ƒ reactiveSetter(newVal)
[[Prototype]]: Object

​ 这里我们在App组件中也向Son组建中传递了相关数据，我们可以看出控制台分别打印了两次 msg和Job 的结果。 很明显Son组件作为子组件对于Faher组件和App组件分别挂载了一次，对应的mounted钩子也分别执行一次，每次打印的信息都是对应父组件传递的相关数据。