Vue3+TypeScript学习笔记（八）

1. 父组件给子组件传递参数主要有两种方法，props和attribute透传，此处暂时只介绍props。

   • props：当在父组件中引入子组件后，直接将要传递的参数写在子组件的标签上，同时在子组件的脚本中定义好传过来的数据即可
   • 注意：withDefaults()是ts特有的函数，接收两个参数。第一个是defineProps()函数，第二个是一个配置对象，用于定义props的默认初始值

<template>
    <div>父组件</div>
    <hr />
    <waterFall
        :name="'小满经常发红包'"
    ></waterFall>
</template>
<script setup lang="ts">
</script>

<template>
  <div>子组件</div>
  <div>{{ name }}</div>
</template>
<script setup lang="ts">
  import { ref, reactive } from 'vue'

  /** 父组件给子组件传递数据 */
  const props = defineProps<{
      name:string,
      age?:number        // 设置参数可选
  }>()

  // 如果需要设置默认值
  const props = withDefaults(
    defineProps<{
      name: string
    }>(),
    {
      name: '让小满试试刀吧',
    }
  )
  console.log(props.name)
</script>

1. 子组件给父组件传递数据有自定义事件和模板引用两种方法：

   • 自定义事件：把回调留在父组件中，在子组件里触发对应事件执行回调，TS新增了事件验证机制，可以预先定义事件名称和回调函数参数列表及返回值

<template>
    <div>父组件</div>
    <hr />
    <waterFall
        @on-click="get"
    ></waterFall>
</template>

<script setup lang="ts">
import waterFall from './components/water-fall.vue';
import { ref,reactive,onMounted } from 'vue'
const get = (name:string) => {
    console.log(name)
}
// 第十二章已看完
</script>

<template>
    <div>子组件</div>
    <div>{{ name }}</div>
    <button @click="send">点我给父组件发送数据</button>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
/** 子组件给父组件传递数据 */

// 第一种方法:自定义事件(将回调留在父组件中,通过子组件触发事件执行回调)
// JS写法:
// const emit = defineEmits(['on-click'])
// TS写法:(增加了事件验证机制)
const emit = defineEmits<{
  // 这里用于限制emit()调用时的参数列表
    (e: 'on-click', params: string): void
}>()
const send = () => {
    emit('on-click', '小满嗷嗷叫')
}
</script>

<style scoped></style>

• 模板引用：在父组件中使用defineExpose函数将特定变量或方法暴露给子组件，子组件通过模板引用的方式获取
• 注意：初始化模板引用必须在挂载之前，挂载之后通过变量访问。如果在挂载之后才初始化会显示undefined

<template>
    <div>父组件</div>
    <hr />
    <waterFall
        ref="wall"
    ></waterFall>
</template>
<script setup lang="ts">
import waterFall from './components/water-fall.vue';
import { ref,reactive,onMounted } from 'vue'
// 注意:为模板引用赋值必须在onMounted之前,否则将获取不到
let wall = ref<InstanceType<typeof waterFall>>()
onMounted(()=>{
    // let wall = ref<InstanceType<typeof waterFall>>()     // wall=Ref<undefined>,初始化模板引用必须在挂载之前
    console.log(wall.value?.age)    // 666
})
</script>

<template>
    <div>子组件</div>
    <div>{{ name }}</div>
    <button @click="send">点我给父组件发送数据</button>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
/** 子组件给父组件传递数据 */

// 第二种方法:模板引用获取
defineExpose({
    age: 666,
})
</script>

小结：

1. 父组件给子组件传递数据：Props和attribute透传
2. 子组件给父组件传递数据：自定义事件或模板引用