如果我们使用组件
    可以使用props
    props:[“name”,”address”]

    1. <template>
    2.   <div class="school">
    3.     <h2> 学校名称 {{ name }}</h2>
    4.     <h2> 学校地址 {{ address }}</h2>
    5.   </div>
    6. </template>
    8. <script>
    9. export default {
    10.   name: "School",
    11.   data(){
    12.     return {
    13.       // name: '苑庄小学',
    14.       // address: '金辉大厦',
    15.     }
    16.   },
    17.   props:["name","address"]
    19. }
    20. </script>
    22. <style>
    23.   .school {
    24.     background: antiquewhite;
    25.   }
    27. </style>

    在App.vue中使用如下方式来传递变量

    <template>
  <div>
    <School name="dailiang" address="苑庄"/>
    <School name="dailiang2" address="苑庄2"></School>
  </div>


</template>

<script>
//引School组件
import School from "@/components/School";

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

<style>

</style>

    我们发现是下面的属性
    image.png

    当然props可以限制类型

    使用如下配置

    props:{
    name:String,
    age:Number,

    }

    当然我们也可以限制哪些必须传,哪些不传直接默认值

      props:{
    name:{
      type: String,
      required:true,
    },
    age:{
      type : String,
      default: 99,
    }
  }

    �