【Vue组件之间的三种通信】

一、组件之间的关系

1、父子组件之间的传值

（1）父组件向子组件传值

父组件向子组件传值：子组件通过props属性获取父组件的值

• 在父组件中使用子组件时，需要通过v-bind指令绑定一个属性

• 在子组件中通过props属性，来获取父组件中v-bind绑定的那个属性

举例：

父组件(FatherPra.vue)中代码如下：

<template>
  <SonPra v-bind:users="arr"/>
</template>

<script>
import SonPra from "./SonPra.vue";
export default {
     
  name: "FatherPra",
  setup(){
     
    const arr=['大雁塔','小雁塔','兵马俑','乾陵','大唐芙蓉园']

    return{
     
      arr
    }
  },
  components:{
     
    SonPra
  }
}
</script>

<style scoped>

</style>

子组件（SonPra.vue）中代码如下：

<template>
  <ul>
    <li v-for="(user,index) in users" v-bind:key="index">{
  {user}}</li>
  </ul>
</template>

<script>
export default {
     
  name: "SonPra",
  props:{
     
    users:{
     
      type:Array,
      required:true
    }
  }
}
</script>

<style scoped>
li{
     
  list-style-position:inside ;
}
</style>

App.vue中代码如下：

<script setup