vue3笔记四(父子组件传参)

1、子组件获取父组件参数

子组件通过defineProps接受传参

// 父组件
<template>
  <div>我是父组件，下面是我的子组件</div>
  <son :list="list" title="父组件title"/>
</template>

<script setup lang="ts">
  import son from './son.vue'
  import { reactive } from 'vue'

  const list = reactive<number[]>([1, 2, 3])
</script>

// 子组件
<template>
   <div>--------子组件--------</div>
   <div>{{ title }}</div>
   <div>{{ list }}</div>
</template>

<script setup lang="ts">
  type Props = {
    title?: string,
    list?: number[]
  }
  // 1、无默认值版
  // defineProps<Props>()

  // 2、ts有默认值版
  withDefaults(defineProps<Props>(), {
     title: '子组件默认title',
     list: () => [ 3, 2, 1 ]
  })
</script>

2、子组件向父组件发射事件

defineEmits派发一个事件

// 父组件
<template>
  <div>我是父组件，下面是我的子组件</div>
  <son @getList="getList"/>
</template>

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

  const getList = (list: number[], flag: boolean) => {
    console.log('父组件接受子组件发射事件', list, flag)
  }
</script>

// 子组件
<template>
   <div>--------子组件--------</div>
   <button @click="clickHandle">子发父事件</button>
</template>

<script setup lang="ts">
   const list = [999, 999, 999]
   const emit = defineEmits(['getList'])
   const clickHandle = () => {
      emit('getList', list, true)
   }
</script>

3、父组件获取子组件方法、属性

// 父组件
<template>
  <div>我是父组件，下面是我的子组件</div>
  // 1、通过ref获取子组件实例
  <son ref="sonRef"/>
</template>

<script setup lang="ts">
  import son from './son.vue'
  import { ref } from 'vue'

  const sonRef = ref(null)
  console.log(sonRef)
</script>

// 子组件
<template>
   <div>--------子组件--------</div>
   <button @click="clickHandle">子发父事件</button>
</template>

<script setup lang="ts">
   const list = [999, 999, 999]
   const emit = defineEmits(['getList'])
   const clickHandle = () => {
      emit('getList', list, true)
   }

   // 2、通过defineExpose属性向父组件暴露允许的属性、方法
   defineExpose({
      list,
      clickHandle
   })
</script>

4、额外知识点：?? 使用

只针对与undefined和null

undefined ?? []   // []
null ?? []        // []
0 ?? []           // 0
false ?? []       // false

原文链接：https://xiaoman.blog.csdn.net/article/details/122850170