vue父子组件间通信——父传子props

总结一下父组件通过prop给子组件下发数据。虽然网上有很多关于父子组件间通信的文章讲得都很好，但还是想自己总结一下加深记忆变成自己的知识。

父传子（父——>子）props总结成三步：
1.传 2.收 3.用

有时候需要父组件向子组件传递一些数据，例如下面的这个例子。
子组件的一些内容需要父组件传递，子组件中的一些内容是否显示由父组件来控制

//父组件
<template>
  <div>
     <p>search</p>
     <son
     :age="content"
     :isApple="apple"
     :isBanana="banana"
     ></son>
  </div>
</template>
<script>
import son from "./son"
export default {
  name: 'search',
  data () {
    return {
        content:"儿子18岁生日快乐",
        apple:true,
        banana:false
    }
  },
  components:{
      son,
  }
}
</script>
<style></style>

//子组件
<template>
  <div>
    <p>父亲跟我说：{{age}}，今晚吃什么水果？</p>
    <ul>
        <li v-if="isApple">吃apple</li>
        <li v-if="isBanana">吃banana</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'son',
  props:['age','isApple','isBanana'],
  data () {
    return {
    }
  }
}
</script>
<style></style>

执行结果：

步骤：

总结：
1、传——父组件通过属性传
2、收——子组件声明接收props
3、用——子组件直接用（在template中，直接用；在js中，this.属性名）

补充一下props：（来自vue官网）
props可以

也可以，指定值类型，可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

后者可以： 它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户