Vue组件之间通信

一、父子组件之间的传值：

1、父子组件之间的传值：

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

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

（2）、在子组件中通过props属性,来获取父组件中v-bind指令绑定的那个属性

举例：
Son.vue代码段

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

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

<style scoped>
li{
  list-style-type: none;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Father.vue代码段

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

<script>
import Son from "./Son.vue"
export default {

  name: "Father",
  setup(){
    const arr = ['大雁塔','小雁塔','兵马俑','大唐芙蓉园','乾陵']
    return{
      arr
    }
  },
  components:{
    Son
  }
}
script>

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

App.vue

<script setup>
// This starter template is using Vue 3