代码地址：

vue_study/vue2-cli/src/components/66 at master · hurong241/vue_study (github.com)

App.vue

<template>
  <div class="app">
    <div>
      vue props属性：组件间参数传递及数据验证<br/>
      场景：如A写了一个组件，B也想用，但是参数不一样，那B用A组件的时候可以传参过去<br/>
      eg:这里有个school.vue中要用到student.vue,但是学生所在班级不同，需要传数据过去<br/>
      注意：此时student.vue中不能定义data,它的数据从props接收<br/>
      <hr/>
    </div>
    <School></School>
  </div>
</template>

<script>
//引入组件
import School from "./components/66/School.vue";

export default {
  name: 'App',
  components: {
    School,
  }
}
</script>

<style>
.app {
  background-color: #999;
  padding: 10px;
}
</style>

School.vue

<template>
  <div>
    <!--语法检查：所有有模板内容都应该放在最外层的div内-->
    <p>名称：{{ school.name }}</p>
    <p>地址：{{ school.address }}</p>
    <hr/>
    <!--
    通过组件传参:
    假如接收方显示count等于此处传过去的count+1,则要在count前加:号，
    不然传过去的是个字符，计算错误,如：传的2，期望结果是2+1=3，实际显示的是字符串21
    测试结果是如果传的不是string貌似都要加:
    -->
    <Student className="二年级" :count="count" :students="students"></Student>
  </div>
</template>

<script>
import Student from './Student.vue'

export default {
  name: 'MySchool',//名称格式示例要2个词组成首字母大写：MySchool
  components: {
    Student
  },
  data() {
    return {
      count:3,
      school: {
        'name': '清华',
        'address': '北京'
      },
      students: [
        {id: 1, name: '李四', sex: '男', age: 39},
        {id: 2, name: '王五', sex: '女', age: 42},
        {id: 3, name: '张三', sex: '女', age: 32},
      ]
    }
  },
  methods: {}
}
</script>

<style>

</style>

Student.vue

<!--组件的结构-->
<template>
  <div>
    <dl>
      <dt>{{ className }}学生信息,共有{{ count + 1 }}个学生</dt>
      <dd v-for="(s) in students" :key="s.id">
        {{ s.id }}-{{ s.name }}-{{ s.sex }}-{{ s.age }}
        <button @click="showId(s.id)">弹出id</button>
      </dd>
    </dl>
  </div>
</template>

<!--组件的交互代码:数据\方法-->
<script>
export default {
  //组件名称，这个名称仅是给vue插件中显示用的
  name: 'my-student',
  //组件数据：由于数据是从props接收的，这里不能定义数据
  // data() {
  //   return {
  //     className:'一年级',
  //     students: [//数组中的对象操作
  //       {id: 1, name: '李四', sex: '男', age: 39},
  //       {id: 2, name: '王五', sex: '女', age: 42},
  //     ]
  //   }
  // },
  //组件方法
  methods: {
    showId(value) {
      alert(value)
    }
  },
  //接收School传过来的数据
  //简写方式1:只定义参数名称
  //props:['className'],
  //简写形式2：定义参数名及数据类型
  // props:{
  //   className:String,
  // },
  //完整写法：参数、类型、是否必须等
  props: {
    className: {
      type: String,
      required: true,
      default: '一年级',
    },
    count: {
      type: Number,
      require: true,
      default: 0,
    },
    students: {}
  }
}

</script>

<!--样式-->
<style>
dt {
  color: red;
}
</style>