配置
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);