Vue3之父子组件传值（setup语法糖格式）

Posted 2023-05-06

参考技术A defineProps()接收父组件传递来的数据

defineEmits()抛出父组件将响应的方法

vue3语法糖

参考技术A Vue3官方提供了 script setup  语法糖

只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。如下：

因为没有了setup函数，那么props，emit，attrs怎么获取呢

setup script语法糖提供了新的API来供我们使用

defineProps  用来接收父组件传来的 props ;  defineEmits  用来声明触发的事件。

//父组件

<template>

  <my-son foo="" @change="childClick" />

</template>

<script lang="ts" setup>

import MySon from "./MySon.vue";

let childClick = (e: any):void =>

  console.log(e);  //

;

</script>

//子组件

<template>

  <span @click="sonClick">信息: props.foo </span>

</template>

<script lang="ts" setup>

import defineEmits, defineProps from "vue";

const emit = defineEmits(["change"]);    // 声明触发事件 change

const props = defineProps( foo: String );  // 获取props

console.log(props)

const sonClick = () =>

    emit('change' , props.foo)



</script>

总结

1、语法糖就是setup()简写

2、在语法糖中使用变量可以直接使用

3、组件不需要祖册

4、不能使用非vue3的模块，钩子函数