vue3.2 新特性

配置

vue3.2 + ts + volar ( 需要禁用vetur)

案例

父组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld @changeInfo="changeInfo" :info="info" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // 不在需要注册

const info = ref("HelloWorld");
const changeInfo = (val: string) => {
  info.value = val;
};
</script>

子组件

<template>
  <div class="about">{{ username }}---{{ info }}</div>
  <button @click="changeInfo">修改info</button>
</template>
<script lang="ts" setup>
import { reactive, toRefs, defineEmits } from "vue";
const props = defineProps({
  info: {
    type: String,
    default: "default",
  },
});

const emit = defineEmits(["changeInfo"]);

// 完整写法
const emits = defineEmits<{
  // 文件提交上传前的钩子函数
  // return true 提交上传
  // return false 取消上传
  (e: "on-uploaded", data: i_file_data): void;
  // 文件上传最终的钩子函数
  (e: "before-upload", data: i_file_data): boolean;
}>();

const state = reactive({
  username: "hhh",
});

const changeInfo = () => {
  emit("changeInfo", "newInfo");
};

let { username } = toRefs(state);
</script>

<style lang='scss' scoped>
</style>

PropType

  props: {
    activeData: {
      type: Object as PropType<i_item>,
      default: null,
    },
  },

defineEmit

const emits = defineEmits<{ (e: "handleImg", id: number): void }>();

其他语法

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>

setup 下怎么注册组件

ref 直接作用于css

const moveTime = ref<string>();

  animation-duration: v-bind(moveTime);