一、用法

1、父组件给子组件传参
2、数据从父组件传递给子组件，只能单项绑定。
3、在子组件内不应该修改父组件传递过来的数据。（若特殊情况需要改变，最后一栏有介绍）

父组件、子组件概念：

组件（父组件）中引入另一个组件（子组件）。

二、父组件传参给子组件 - props

1、传静态数据

1、父组件传参

<template>
  <div id="father">
      <div>我是父亲，我通过 props 给儿子传参</div>
      <!-- 三、子组件：通过占位符添加特性的方式来传参 -->
      <Son
        username="张三"
        :height="160"
        color="红色"
      ></Son>
  </div>
</template>
<script>
// 一、引入组件
import Son from '@/components/son/Son'
export default {
  name: "Father",
  data() {
    return {};
  },
//   二、在 components 中 写入组件
   components:{Son}
};
</script>
<style></style>

2、子组件拿值

<template>
  <div id="SonCat">
    <span> 我是Cat 的儿子 </span>
    <!-- 二、在 节点中显示 -->
    <p>身高：{{height}}</p><p>名字：{{username}}</p>
    <button @click="getPropsFn">点击我获取父亲传给我的参数</button>
  </div>
</template>
<script>
export default {
  name: "SonCat",
  // 一、引入参数
  props:['username','height','color'],
  data() {return {};},
    methods: {
      // 三、js中拿到值  (不可用 es6 语法，否则拿不到值)
      getPropsFn:function(){
        console.log(this.height)
      },
    },
};
</script>
<style></style>

2、传动态单数据、数字类型

1、父组件传参

<template>
  <div id="father">
      <div>我是父亲，我通过 props 给儿子传参</div>
      <!-- 四、调用子组件 ，传动态参数-->
      <Son
        :height="height"
      ></Son>
  </div>
</template>
<script>
// 一、引入组件
import Son from '@/components/son/Son'
export default {
  name: "Father",
  data() {
    //  三、设置参数
    return {height:1000};
  },
//   二、在 components 中 写入组件
   components:{Son}
};
</script>

2、子组件拿值

<template>
  <div id="SonCat">
    <span> 我是Cat 的儿子 </span>
    <!-- 二、在 节点中显示 -->
    <p>身高：{{height}}</p>
    <button @click="getPropsFn">点击我获取父亲传给我的参数</button>
  </div>
</template>
<script>
export default {
  name: "SonCat",
  // 一、引入参数
  props:['height'],
  data() { return {}; },
    methods: {
      // 三、js中拿到值  (不可用 es6 语法，否则拿不到值)
      getPropsFn:function(){
        console.log(this.height)
      },
    },
};
</script>
<style></style>

3、传动态数据表

三、props 详解

一、props验证：如果传入的数据不符合规格，Vue会发出警告。

prpos 要指定验证规格，需要用对象的形式，而不能用字符串数组

props:{
   // height:Number
   height:Array
 },


`type 可以是下面原生构造器:`
String
Number
Boolean
Function
Object
Array
Symbol

二、修改prop数据

一般情况子组件拿到 父亲传的 props 值直接显示数据，也有少数需在 子组件修改参数。
子组件中修改prop中的数据，通常有以下两种原因

1、prop 作为初始值传入后，子组件想把它当作局部数据来用
2、prop 作为初始值传入，由子组件处理成其它数据输出

1、在子组件定义的局部变量接受props值 (Son 组件)

注：只能接受 props 传的初始值，当父组件要传递的值发生变化时，dataHeight无法接收到最新值

<template>
  <div id="SonCat">
    <span> 我是Cat 的儿子 </span>
    <p>身高：{{height}}</p>
    <!-- 三、页面显示 -->
    <p>初始值：{{dataHeight}}</p>
    <button @click="getPropsFn">打印获取的父亲值</button>
  </div>
</template>

<script>
export default {
  name: "SonCat",
  // 一、引入参数
  props:['height'],
  data() {
    return {
      // 二、拿到 props 值
      dataHeight:this.height
    };
  },
    methods: {
      getPropsFn:function(){
        console.log(this.height)
      },
    },
};
</script>
<style></style>

2、使用变量储存prop的初始值，并使用watch来观察prop的值的变化。发生变化时，更新变量的值 （Son）

最常使用

<template>
  <div id="SonCat">
    <span> 我是Cat 的儿子 </span>
    <p>身高：{{height}}</p>
    <!-- 四、页面显示 -->
    <p>初始值：{{dataHeight}}</p>
    <button @click="getPropsFn">打印获取的父亲值</button>
  </div>
</template>

<script>
export default {
  name: "SonCat",
  // 一、引入参数
  props:['height'],
  data() {
    return {
      // 二、props 值传给 局部变量
      dataHeight:this.height
    };
  },
    methods: {
      getPropsFn:function(){
        console.log(this.height)
      },
    },
    // 三、监控 props 值的变化，进行下一步操作
    watch:{
      height(){
        this.dataHeight = this.height
        console.log("父亲传的值发生改变，儿子的操作开始...")
      }
    }
};
</script>
<style></style>

参考文献：https://www.cnblogs.com/xiaohuochai/p/7388866.html