【无标题】vue3 script setup以及defineProps，defineEmits

script setup

最新的vue3.2版本更新了新的语法糖，就是 setup 可以直接写在script里面。

<script setup lang="ts"></script>

之前的写法是serup() 并且还需要retun。
更新之后可是使用顶层await ，结果会被编译为 async setup()。
组件引入便可直接使用

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

defineProps和defineEmits

组件传值是常用的一个东西，使用方法也没有改变太多。

defineProps

父组件

<HelloWorld msg="Hello chen" name="cqy"  />

子组件

const props = defineProps({
  msg:String,
  name:String
})

msg和name就可以直接拿来用了

defineEmits

子组件

<template>
  <h1 @click="myClick">{{ msg }}+++{{name}}</h1>
 <template>
 
const emit=defineEmits(['myClick'])
const myClick = () => {
  const data ='传参'
  emit("myClick",data)
}

父组件

<HelloWorld @myClick="myClick" />

const myClick = (e: any) => {
  console.log(e);
};