一、props概念

1、作用

让组件接收外部传过来的数据

2、适用场景

父子组件通信

3、三种书写方式

① 只接收：props:["name"]；

② 限制类型：props:{name:String}；

③ 限制类型，限制必要性，指定默认值：props：{name：{type：string,required:true}}

二、案例演练

1、父组件向子组件传递数据

父组件向子组件传递数据（非函数），本质是父向子传递数据

父组件

<template>
  <div id="app">
    <h3>通过props实现父向子传数据</h3>
    <Student :sendName="name"/>
  </div>
</template>

<script>
import Student from './components/Student.vue'
export default {
  name: 'App',
  data(){
    return {
      name:"憨瓜",
    }
  },
  components: {Student},
}
</script>

子组件

<template>
  <div>
    <p>学生姓名是：{{sendName}}</p>
  </div>
</template>

<script>
export default {
  name:"Student",
  props:["sendName"],
}
</script>

运行结果

2、子组件向父组件传递数据

父组件给子组件传递数据（函数）：本质其实是子组件给父组件传递数据

父组件

<template>
  <div id="app">
    <h3>通过props配置项得到学校的名称是：{{sName}}</h3>
    <School :getName="getName"/>
  </div>
</template>

<script>
import School from './components/School.vue'
export default {
  name: 'App',
  data(){
    return {
      sName:""
    }
  },
  components: {School},
  methods:{
    getName(name){
      this.sName=name
    }
  }
}
</script>

子组件

<template>
  <div>
    <p>学校名称：{{name}}</p>
    <p>学校地址：{{adress}}</p>
    <button @click="sendName">通过props实现子向父传递数据</button>
  </div>
</template>

<script>
export default {
  name:"School",
  data(){
    return {
      name:"喵喵学院",
      adress:"郑州"
    }
  },
  props:["getName"],
  methods:{
    sendName(){
      this.getName(this.name)
    }
  }
}
</script>

运行结果

三、进阶学习

1、props与data中属性名相同

父组件

<template>
  <div id="app">
    <h3>props与data中数据属性名相同时</h3>
    <Student :sendName="name"/>
  </div>
</template>

<script>
import Student from './components/Student.vue'
export default {
  name: 'App',
  data(){
    return {
      name:"憨瓜",
    }
  },
  components: {Student},
}
</script>

子组件

<template>
  <div>
    <p>学生姓名是：{{sendName}}</p>
  </div>
</template>

<script>
export default {
  name:"Student",
  //data中的name与props传递的一样
  data(){
    return {
      sendName:"波妞",
    }
  },
  props:["sendName"],
}
</script>

运行结果

结论：控制台警告，但运行结果优先级：props > data

2、修改props传入的数据

父组件

//代码用上面1中的父组件的代码即可

子组件

<template>
  <div>
    <p>学生姓名是：{{sendName}}</p>
    <button @click="changeName">点击修姓名</button>
  </div>
</template>

<script>
export default {
  name:"Student",
  props:["sendName"],
  methods:{
    //修改父组件传进来的数据
    changeName(){
      this.sendName="波妞";
    }
  }
}
</script>

运行结果

结论：props是单向数据流，修改props中的数据页面会更改，但控制台会警告

3、正确修改props方法

复制props中的数据到data中一份，然后去修改data中的数据

<template>
  <div>
    <p>学生姓名是：{{cName}}</p>
    <button @click="changeName">点击修姓名</button>
  </div>
</template>

<script>
export default {
  name:"Student",
  //1、将props中的数据复制到data中
  data(){
    return {
      cName:this.sendName,
    }
  },
  props:["sendName"],
  methods:{
    //2、修改data中的数据
    changeName(){
      this.cName="波妞"
    }
  }
}
</script>

运行结果

四、总结

1、如果父组件给子组件传递数据（非函数）： 本质其实是父组件给子组件传递数据

2、如果父组件给子组件传递数据（函数）：本质其实是子组件给父组件传递数据

3、如果props中的属性和data中的属性相同，那么显示的为props中的属性，优先级：props > data，但控制台会发出警告

4、props是单向数据流，默认是只读的

5、vue底层会监视到我们对props的修改，如果进行了修改，页面显示修改的数据，但控制台会发出警告，如业务需求确实要改，那么要复制props的内容到data中一份，然后修改data中的数据