vue组件通信-父组件传数据给子组件

父组件传数据给子组件（prop）

子组件代码示例：

查看代码

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
export default {
  name: 'Student',
  data () {
    return {
      msg: "我是一名学生"
    }
  },
  //props的优先级高于data

  // props: ['name', 'age', 'sex']//简单声明接收----------------------->常见

  //接收同时对数据类型进行限制
  /*props: {
    name: String,
    age: Number,
    sex: String
  }*/

  //收同时对数据类型进行限制+默认值指定+必要性限制
  props: {
    name: {
      type: String,//name的类型是字符串
      required: ture//name是必须的
    },
    name: {
      type: Number,//
      default: 99//如果没传值，默认是99
    },


  }
}
</script>

<style>
</style>

父组件代码示例：

查看代码

<template>
  <div id="root">
      <Student v-bind:name='lisi'
             :sex='man'
             :age='18'></Student>
  </div>
</template>

<script>
import Student from './components/Student'
export default {
  name: 'App',
  components: { Student },
}
 </script>

   原理