Vue.js之父组件向子组件传递数据--props

前言

在使用vue开发过程中，我们时常要通过父组件向子组件传递数据，但是怎样才能实现这一过程呢？其中尤为主要的就是我们今天的主角——props

什么是props？

“Props”是一个特殊的关键字，代表属性。它可以在组件上注册以将数据从父组件传递到其子组件之一。props 中的数据只能父组件向子组件传递，这只是意味着不能将数据从子级传递给父级。
要注意的是 Props 是只读的，不能被子组件修改，因为父组件“拥有”该值。

下面开始说正事！！！

子组件如何注册 props：

<template>
<!-- 使用数据 -->
  <p>{{ name }}</p>
  <p>{{ age }}</p>
</template>

<script>
export default {
  name:'Son',
  // 接收数据
  props: ["name","age"]
}
</script>

props 组件里面的 “name”,“age” 就是来自于父组件的数据，它们的名字必须与父组件传递数据时候定义的名字一致。

父组件如何将数据传递给 props 即子组件？

可以使用 v-bind 将您的值作为数据属性传递。例如：

<template>
  <div id="Parent">
  <!-- 传递数据 -->
    <Son :name='name' :age='age' ></Son>
  </div>
</template>

<script>
// 引入子组件
import Son from './components/Son'

export default {
  name: 'Parent',
  data(){
    return{
      name:"Joel",
      age:18
    }
  },
  // 注册局部组件
  components: {  Son  }
}
</script>

下课！