vue3 学习笔记10 – 父子传参
父子组件之间的传参可以通过属性(prop)和事件(event)来实现
使用属性(props)传递数据
在子组件中定义 props
- 在子组件中使用 defineProps 来定义接收的属性
// children.vue
<template>
<div>{{ name }}: {{age}}</div><div>{{personal.address}} {{personal.sex}}</div><div v-for="(item,index) in list" :key="index">{{item.phone}}</div>
</template><script lang="ts" setup>
interface Phone {phone: string;
}
interface ChildProps {name: string;age: number;
}
const props = defineProps(['name','age','personal','list'])
// 或者
const props= defineProps({name: {type: String as PropType<string>,default: () => {return ''}},age:{type: Number as PropType<number>,default: () => {return 0} },personal:{type: Object,default: () => {return {}} },list:{type: Array as () => User[],default: () => {return []} }
})
</script>在父组件中传递参数
- 在父组件中使用子组件的标签，并通过属性传递数据：
// parent.vue<template><childrenTemplate :name="name" :age="age" :personal="personal" :list="list"></childrenTemplate></template><script lang="ts" setup>import childrenTemplate from './components/children.vue'let name = ref('小涨')let age = ref(8)let personal = reactive({address:'上海',sex:'女'})let list = ref([{phone:'1111111'},{phone:'2222222'}])</script>
defineEmits 子组件向父组件传参
- 在子组件中定义事件
- 在子组件中，使用 defineEmits 定义事件，并通过 emit 方法触发事件
// children.vue
<template>
<div>{{ name }}: {{age}}</div><div>{{personal.address}} {{personal.sex}}</div><div v-for="(item,index) in list" :key="index">{{item.phone}}</div><el-button @click="handleChangeParent">改变名字</el-button><el-button @click="handleChangeParent2">改变年龄</el-button>
</template><script lang="ts" setup>
interface Phone {phone: string;
}
interface ChildProps {name: string;age: number;
}
const props = defineProps(['name','age','personal','list'])
// 或者
const props= defineProps({name: {type: String as PropType<string>,default: () => {return ''}},age:{type: Number as PropType<number>,default: () => {return 0} },personal:{type: Object,default: () => {return {}} },list:{type: Array as () => User[],default: () => {return []} }
})
const $emit = defineEmits(['childClick','childChangeName']);
const handleChangeParent = ()=>{$emit('childClick',43)
}
const handleChangeParent2 = ()=>{$emit('childChangeName','小明')
}
</script>- 在父组件中监听事件
- 在父组件中监听子组件触发的事件，并处理数据或者触发相应的方法。
// parent.vue<template><childrenTemplate :name="name" :age="age" :personal="personal" :list="list" @child-click="handleEmit" @child-change-name="handleGet"></childrenTemplate></template><script lang="ts" setup>import childrenTemplate from './components/children.vue'let name = ref('小涨')let age = ref(8)let personal = reactive({address:'上海',sex:'女'})let list = ref([{phone:'1111111'},{phone:'2222222'}])const handleEmit = (val:number)=>{age.value =val}const handleGet = (val:string)=>{name.value = val}</script>
