vue3+ts深入组件（二）父子组件传参

本文使用setup语法糖

一、父组件向子组件传参

1.父组件中，字符串类型直接传参，其他所有类型均通过v-bind绑定传参，示例如下

<Menu title="我是小吴" :data="data1"></Menu>

<script setup>
import {reactive} from 'vue'
comst data1 = reactive<number[]>([1,2,3])
</script>

2.子组件中接收父组件参数

定义类型type，后调用defineProps方法，该方法无需在Vue中引用，可直接使用

<templata>
    <div>{
   
   {tittle}}{
   
   {data}}</div>
</templata>

//定义类type
type Props = {
	title:string,
	data:number[]
}
defineProps<Props>()

//或直接写在内部(对象写法)
defineProps<
	{
		title:String,
		data:number[]
	}>()

进阶写法 可以直接在type定义时，进行Props校验

const Props = defineProps<{
     title:{
         type:String,
         required:true,
         default:'默认值',
    }
    data?: number[]
}>()

二、子组件向父组件传参

1. 子组件直接通过 $emit 来发送 一个事件参数 例如

<button @click="$emit('addEvent',1)">click me</button>

//父组件中 
//vue3官方文档中介绍，像组件与 prop 一样，事件的名字也提供了自动的格式转换。
注意这里我们触发了一个以 camelCase 形式命名的事件，
但在父组件中可以使用 kebab-case 形式来监听。
与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。
即 addEvent 会自动解析为add-event 并且由于代码位置及风格匹配，提高了模板的可读性
官方推荐利用这种代码特性 来书写 prop 及事件

<cpn @add-event="(n:number)=>count+=n"  /> {
   
   {count}}

<script setup lang="ts>
import {ref} from 'vue'
	const count = ref("0")
<script>

2.子组件中,使用defineEmis来传递一个事件

//设置点击事件，点击此按钮后，再进行emit发送
<button @click = "btnClick">发送</button>

import {reactive} from 'vue'

const data1 = reactive<number[]>([7,8,9])

//定义要发送的事件名称，如 aList 
const emit = defineEmits(['aList'])

//点击后将aList事件发送给父组件
const btnClick = ()=>{
        emit('aList',data1)
}

3. 如果你使用Typescript，可以使用纯类型标注来声明触发的事件 ,如下

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

2.父组件接受参数

// v-on 简写@ 加上 发送的事件名称,例如该案例为 aList, 然后定义父组件自己的事件名,如getList
<Menu @aList = "getList">



const getList = (data1:number[])=>{
//打印一下接受到的参数
    console.log(data1,'父组件已成功接受到参数')
}

三、在未接收到父组件参数时，子组件可以用withDefault设置默认值

1.子组件中

withDefaults(defineProps<Props>(),{

//除字符串类型以外， 需要使用箭头函数来返回值
        data:()=>[1,2,3],
        
        title:'默认值'
})

四、子组件暴露给父组件内部属性

1.通过defineExpose

const data3 = reactive<number>([1,2,3])
deineExpose({data3})

2.从父组件获取子组件实例通过ref

<Menu ref="menus">

const menus = ref(null)


console.log(menus.value)

五 、事件校验

和对 props 添加类型校验的方式类似，所有触发的事件也可以使用对象形式来描述。

要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入 emit 的内容，返回一个布尔值来表明事件是否合法。

<script setup>
const emit = defineEmits({
  // 没有校验
  click: null,

  // 校验 submit 事件
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('Invalid submit event payload!')
      return false
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}

文末

新人创作，还望支持！欢迎学习交流，如有错误，还请指正！
已更新于2022/11/21