Vue3: 父子组件传值

创建父组件 father.vue

<script setup lang='ts'>
import Son from './son.vue'

</script>

<template>
  <div>
    父组件
    <Son />
  </div>
</template>

创建子组件 son.vue

<template>
  <div>
    <p>子组件</p>

  </div>
</template>

父 --> 子

以'属性'的方式进行传递

<子组件名 :属性=值 />

<Son :title="name" />

import { ref } from 'vue'

const name = ref("姜维")
const arr = ref([1, 2, 3])

<Son :title="name" :arr="arr" />

通过 v-model 方式

<子组件名 v-model:属性名="值" />

<Son v-model:data="data" />

const data = reactive<object>({
  name: "步练师",
  age: 20
})

<Son v-model:data="data" @update:data="changeData" />

子组件接收父组件传的值

使用宏函数 defineProps({})

    defineProps({
        父组件传递过来的属性:{
            type: 属性类型,
            default: 默认值
        }
    })
    defineProps({
        title: {
            type: String,
            default: "我是默认值"
        },
        arr: {
            type:Array,
            default:() => []
        }
    })

const props = defineProps({
  title: {
    type: String,
    default: "我是默认值"
  },
  arr: {
    type: Array,
    default: () => []
  }
})

console.log(props.title, props.arr);

使用 typescript 方式

    defineProps<{
        父组件传递过来的属性: 属性类型
    }>()
    
    defineProps<{
        title: string,
        arr: number[]
    }>()
    
    >>> "使用 withDefaults 来定义默认值"
    
    withDefaults(defineProps<{
        title: string,
        arr: number[]
    }>(), {
        title: '我是默认值',
        arr: () => []
    })

子 --> 父

通过事件的方式来传递

使用宏函数 defineEmits()

defineEmits(["自定义事件","自定义事件","自定义事件",...])
    
defineEmits(["on-message",...])

const emit = defineEmits(['on-message'])

const sendMessageToFather = function () {
  let data = { code: 200, message: '子组件发的信息' }
  emit('on-message', data)
}

<button @click="sendMessageToFather">发送消息给父组件</button>

使用 typescript 方式

defineEmits<{
  (e:"自定义事件名",参数:参数类型):函数返回值类型,
  (e:"自定义事件名",参数:参数类型):函数返回值类型,
  ...
}>()

const emit = defineEmits<{
  (e: 'on-message', data: object): void
}>()

const sendMessageToFather = function () {
  let data = { code: 200, message: "子组件发的信息" }
  emit('on-message', data)
}

父组件接收子组件传递的值

<子组件名称 @自定义事件名="事件处理函数" />

const handleMessage = function (data: object) {
  console.log(data); //{code: 200, message: '子组件发的信息'}
}

<Son @on-message="handleMessage" />

子组件暴露属性或方法

使用 defineExpose() 宏函数

son.vue

defineExpose({
  s: "我是字符串,子组件暴露的",
  fn: function () {
    console.log("子组件的函数被调用");
  }
})

父组件访问子组件的属性或方法

定义ref属性

<子组件名称 ref="随便起名,自己记住就行" />

获取子组件

const ref名称 = ref<InstanceType<typeof 你的子组件>>()

import Son from './components/Son/index.vue'

import {ref} from 'vue'

const son = ref<InstanceType<typeof Son>>()

const visit = function () {
  console.log(son.value.s); // 我是字符串,子组件暴露的
  son.value.fn(); // 子组件的函数被调用
}

<Son ref="son" />
<button @click="visit">访问子组件的属性或方法</button>