Vue3基础之父子组件

.简述

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({ 
    nowCount:{
        type:Function,
        default:undefined
    }
 })
 const count = ref(123) 
 const fatherMth = ()=>{
    console.log(‘调用父组件函数’);
    props.nowCount&&props.nowCount(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:属性')