.简述
vue3中父子组件引用和传值，我们通过下面几个小节来说明实现。
- 1.父组件props传值子组件
- 2.父组件调用子组件函数
- 3.子组件调用父组件函数：方式1
- 4.子组件调用父组件函数：方式2
- 5.子组件修改prop属性值：v-model
关键引用
- defineProps 父传子参
- defineExpose 导出子函数
- defineEmits 子调父
- ref 组件声明 父调子函数
1.父组件props传值子组件
- 子组件
子组件声明 defineProps 创建传参对象
<template>
<div>
{{name} 子组件 {{sex}}
</div>
</template>
<script setup>
import {defineProps} from 'vue'
const props = defineProps({
name:{
type: String,
default: '我'
},
sex:{
type: String,
default: '男'
},
})
</script>
- 父组件
引用子组件即可使用。父组件通过子组件声明的name和sex使用 :name传递过去。
<template>
<div>
<Son ref="sonRef" :name="msg" :sex="sex" ></Son>
</div>
</template>
<script setup>
import Son from './Son.vue';
import {ref} from 'vue'
const msg = ref('这是我的')
const sex= ref('女朋友')
</script>
2.父组件调用子组件函数
- 子组件
子组件声明 defineExpose ，用来导出可以被父组件调用的函数
<template>
<div>
子组件
</div>
</template>
<script setup>
import {defineExpose} from 'vue'
const tailFather = ()=>{
console.log('此函数被调用了')
}
defineExpose({
tailFather
})
</script>
- 父组件
引用子组件并声明ref="sonRef"，但还需声明 const sonRef = ref()，否则调用不到子组件函数
<template>
<div>
<Son ref="sonRef"></Son>
</div>
</template>
<script setup>
import Son from './Son.vue';
import {ref} from 'vue'
const sonRef = ref()
const tail = ()=>{
sonRef.value.tailFather()
}
</script>
3.子组件调用父组件函数：方式1
- 子组件
子组件声明 defineEmits创建emit实例，通过emit调用父组件函数。
<template>
<div>
<button @click="fatherMth ">调用父组件函数</button>
</div>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
const count = ref(123)
const emit = defineEmits()
const fatherMth = ()=>{
console.log(‘调用父组件函数’);
emit('countMth',count.value)
}
</script>
<style>
</style>
- 父组件
引用子组件并声明 @函数名= “函数具体实现”，子组件引用函数名
<template>
<div>
<Son @countMth="countMth"></Son>
</div>
</template>
<script setup>
import Son from './Son.vue';
const countMth = (val)=>{
console.log('子组件传递数据是：'+ val)
}
</script>
4.子组件调用父组件函数：方式2
- 子组件
子组件声明 defineProps，创建父需要传函数属性prop。
<template>
<div>
<button @click="fatherMth ">调用父组件函数</button>
</div>
</template>
<script setup>
import {ref,defineProps} from 'vue'
const props = defineProps({
countMth:{
type:Function,
default:undefined
}
})
const count = ref(123)
const fatherMth = ()=>{
console.log(‘调用父组件函数’);
props.countMth&&props.countMth(count.value)
}
</script>
- 父组件
引用子组件并声明 引号+函数名= “函数具体实现”，子组件引用prop属性即可。
<template>
<div>
<Son :countMth="countMth"></Son>
</div>
</template>
<script setup>
import Son from './Son.vue';
const countMth = (val)=>{
console.log('子组件传递数据是：'+ val)
}
</script>
5.子组件修改prop属性值：v-model
- 子组件
子组件声明 defineProps，创建父需要传函数属性prop，而子组件修改props时候不可以修改的，那么如何修改呢？
- 使用defineEmits ，emit('update:prop属性'，值) 既可以
<template>
<div>
<button @click="changeCount">修改prop值</button>
</div>
</template>
<script setup>
import {ref,defineProps,defineEmits } from 'vue'
const props = defineProps({
count:{
type:Number,
default:0
}
})
const emit = defineEmits ()
const changeCount= ()=>{
emit('update:count',123)
}
</script>
- 父组件
引用子组件并声明 并使用v-model，之前都是直接冒号+prop属性=“值”
<template>
<div>
<Son v-model:count="countNum "></Son>
</div>
</template>
<script setup>
import {ref} from 'vue'
import Son from './Son.vue';
const countNum = ref(-1)
</script>
关键点就是 父组件 使用v-model，子组件emit('update:属性')
