Vite-Vue setup ＜script setup＞

废话不多说，直接上最关键的

首先要使用此语法糖，必须是基于Vite创建的Vue3.0项目，原本的Vue cil 创建的应该是不支持的！！！

<script setup>
<script>

1. props传参

import { defineProps } from "vue";
let props = defineProps({
  msg: {
    type: String,
    default: ''
  },
});

2. 父子组件通信

import { defineEmits } from "vue";
const emit = defineEmits(["myclick"]);
const clickButton = () => {
  emit("myclick", props.msg);
};

3.需要注意的点
useContext,defineEmit 都已经过时了
useContext => useSlots, useAttrs
defineEmit => defineEmits

4.全部代码

<template>
  <div @click="clickButton">
    {{ msg }}
  </div>
</template>

<script setup>
import { defineProps, defineEmits, useContext, watch, ref, useSlots, useAttrs } from "vue";
// useContext,defineEmit 都已经过时了
// useContext => useSlots, useAttrs
// defineEmit => defineEmits
let props = defineProps({
  msg: {
    type: String,
    default: ''
  },
});
const msg = ref(props.msg)
// 父子组件传参数据
const emit = defineEmits(["myclick"]);
watch(() => { return props.msg }, (val) => {
  msg.value = val
})
const clickButton = () => {
  emit("myclick", props.msg);
  console.log("我是子组件的函数", props.msg);
};
</script>