vue3父子组件传参以及父组件调用子组件的属性或方法

1 父组件通过v-bind(或者属性绑定)绑定一个数据，传递字符串类型是不需要v-bind， 传递非字符串类型时候可以通过 冒号简写

//  父组件
<template>
  <Son ref="sonRef" title="晚上好" :arr="[1,2,3]"></Son>
</template>

2 子组件通过defineProps接收,defineProps是无须引入的直接使用即可，下面这种写法是没有默认值

//  子组件
<template>
  <div>我是父组件传过来的title------{{title}}</div>
   <div>我是父组件传过来的arr------{{arr}}</div>
</template>
<script lang="ts" setup>
import {reactive, ref} from "vue";

// 这里的ref也可以用reactive,如果使用reactive传递值的时候就不用list.value了
const list = ref<number[]>([7,8,9])  
// 通过type声明Props
type Props = {
    title?: string, // ？表示可选
    arr?: number[],
}

// 1 ts第一种写法，但是这种写法是没默认值的
 defineProps<{
    title: string,
    arr: number[],
 }>()
</script>

3 下面这种方式也是通过defineProps接收,但是这种写法是有默认值的，是ts中特有的写法

//  子组件
<template>
  <div>我是父组件传过来的title------{{title}}</div>
   <div>我是父组件传过来的arr------{{arr}}</div>
</template>
<script lang="ts" setup>
import {reactive, ref} from "vue";

const list = ref<number[]>([7,8,9])
// 1 可以使用type声明Props
type Props = {
    title?: string, // ？表示可选
    arr?: number[],
}

// 2 ts第二种写法，withDefaults是ts中特有的,是有默认值的
withDefaults(defineProps<Props>(),{
    title: '默认值',
    arr: () => [],
})
</script>

4 刚才子组件中使用的是type声明Props，也可以使用下面这种方式去声明

interface Props  {
    title?: string,
    arr?: number[],
}

5 如果在js中，子组件中defineProps是下面这种写法

 defineProps({
     title:{
        type: String,
        default: '',
     },
    arr:{
        type: Array,
        default: [],
     }
 })

5 子组件向父组件传参，首先是通过在子组件中defineEmits派发一个事件,下面是在子组件中绑定了一个click 事件 ,通过defineEmits 注册了一个自定义事件，点击click 触发 emit 去调用我们注册的事件, 然后传递参数

//  子组件
<template>
    <button @click="clickTap">派发给父组件</button>
</template>
<script lang="ts" setup>
import {reactive, ref} from "vue";
const list = ref<number[]>([7,8,9])

// 如果使用了ts,defineEmits第一种方式
// const emit = defineEmits(['send'])

// 如果使用了ts,defineEmits第二种方式
const emit = defineEmits<{ (e:'send', list:number[]):void }>()
const clickTap = () => {
  emit('send', list.value)
}

</script>

6 在父组件中接收

// 父组件
<template>
  <Son  @send="sonSend"></Son>
</template>

<script setup lang="ts">
import Son from './components/Son.vue'
const sonSend = (val:number[]) => {
    console.log('子组件传过来的值',val)
}

</script>

7 父组件使用子组件的方法或属性，要在子组件中通过defineExpose向外暴露出去

//  子组件
<script lang="ts" setup>
import { ref} from "vue";
const list = ref<number[]>([7,8,9])
const test = () => {
    console.log('子组件的方法')
}
// defineExpose用法，可以向外暴露属性或者方法
defineExpose({
    list,  // list是向外暴露的属性/值
    test,  // test是向外暴露的方法
})
</script>

8 父组件中使用子组件的方法，要通过ref获取子组件实例

//  父组件
<template>
  <Son ref="sonRef"></Son>
</template>


<script setup lang="ts">
import Son from './components/Son.vue'
import {onMounted, ref} from "vue";

const sonRef = ref()

//使用子子组件的属性
onMounted(()=>{
    console.log(sonRef.value?.list)  // 这里为了测试，可以不在mounted中，根据自己在哪个地方使用即可
    console.log(sonRef.value?.test())
})
</script>