父视图,通过属性传入参数

<template>
  <div class="home">
    <Index name="Zhang" age="18"/>
  </div>
</template>

<script>
import Index from '@/components/Index.vue'

export default {
  name: 'Home',
  components: {
    Index
  }
}
</script>
 

子组件获取参数props

<template>
  <div class="hello">
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
  </div>
</template>

<script>
export default {
  name: "Index",
  props: {
    name: String,
    age: Number,
  },
};
</script>

<style scoped lang="scss">
</style>