VUE3 新特性 script setup
script setup是VUE3的实验性功能,直接把 setup 写在 script 标签中,表示标签里面的代码相当于在setup里面运行。
这样可以太太省略很多冗余代码,默认直接暴露出去。
// APP.vue
<template>
<div>
{{ yjj }}
</div>
<Home message="虚心学习" />
</template>
<script setup>
import { ref } from "vue";
// 只需导入组件即可直接在模板中使用
import Home from "./components/home.vue";
// 同理,定义即可使用
let yjj = ref("牛马");
</script>
**setup 的中参数迁移:props, emit, slots , attr **
// home.vue
<template>
<div>{{ props.message }}</div>
<slot></slot>
</template>
<script setup>
// 获取 props,emit,slots,attrs
import { defineProps, defineEmit, useContext } from "vue";
// 获取props
let props = defineProps({
message: String,
});
// emits
let emits = defineEmit(["click", "delete"]);
// slots,attrs
let { slots, attrs } = useContext();
console.log(attrs, slots);
</script>
<style scoped></style>