一、组件之间的关系
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>