本文主要是介绍从新回归Vue之3.0（二）：setup，defineProps，defineEmits，变量，defineExpose，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一.在setup()中不能用this
在vue2.x里飞天遁地的this没有了，因为
`setup` 的调用发生在 `data` 、`computed` 或 `methods` 被解析之前，所以它们无法在 `setup` 中被获取，这也是为了避免setup()和其他选项式API混淆。
二.setup推荐用法
<template><h1>{{ msg }}</h1>
</template><script setup lang="ts">
import { ref } from "vue";
</script><style scoped>
</style>注意点：
- 在setup语法糖中导入组件不需要注册声明，直接在视图中使用即可；
- 默认的vue文件结构发生改变，js默认放到页面顶部，而视图template放到js下面，style放到页面底部；
- 导入vue文件必须写上文件后缀名.vue, 否则ts无法识别vue文件。
- vscode插件不要用vue-format，会导致setup申明消失。
三.defineProps和defineEmits的用法
`defineProps` 和 `defineEmits` API，它们在 `<script setup>` 中都是自动可用的：
defineProps类似之前的props属性
defineEmits类似之前的this.$emit('xxx')的用法
父组件
<template><HelloWorld :msg="msg" @handleClick="handleClick"/>
</template><script setup lang="ts">
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue'
//data
const msg = ref('欢迎使用vite！')
//methods
const handleClick = (params)=>{console.log(params);
}
</script>子组件
<template><h1>{{ msg }}</h1><button @click="handleClick">点击我调用父组件方法</button>
</template><script setup lang="ts">
import { ref } from "vue";
// props
const props = defineProps({msg: {type: String,default: "",},
});
// emit
const emit = defineEmits(["handleClick"]);
// methods
const handleClick = () => {emit("handleClick", "父组件方法被调用了");
};
</script>四，如何创建变量
import { ref,reactive } from "vue";
// data
let a = ref(2)//ref用来创建基本数据类型
let obj = reactive({name: '张三', age: 2300})//reactive用来创建复杂数据类型
let arr = reactive(['1', '2', '3'])五.defineExpose的用法
在vue2.x中我们可以通过this.$refs.xxx或者 this.$parent 链获取到的组件的公开实例，
但是使用 <script setup> 的组件是默认关闭的，
为了在 <script setup> 组件中明确要暴露出去的属性，使用 defineExpose 。
假如我们要在子组件里暴露一个handleClick2方法，我们要先定义这个方法
const handleClick2 = () => {a.value = 3obj.name = '我叫改变'
};然后整个<script setup> 的最下边用
// defineExpose 统一暴露
defineExpose({a,obj,handleClick2
})因为如果defineExpose代码行在上，handleClick2申明在下，会报错
这篇关于从新回归Vue之3.0（二）：setup，defineProps，defineEmits，变量，defineExpose的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
