vue3 setup标签语法和export default 简洁
2022-12-08 本文已影响0人
ThisWu
vue2里面可以直接在data声明响应式变量后可以直接在模板语言里直接使用,vue其实也也可以。因为有setup标签和export default两种编码规则所以一下也包含了两种介绍:
第一种 export default,一般用于3.2前,因为当时不支持setup标签语法
// 声明响应式变量
let state = reactive({
value: Value,
width: '100%',
})
return {
...toRefs(state), // 解构响应式变量
}
第二种 setup标签语法
// 声明state
const state = reactive({ name: 'Jerry'
}) // 将方法、变量暴露给父组件使用,父组件才可通过ref API拿到子组件暴露的数据
defineExpose({ // 解构state
...toRefs(state), // 声明方法
changeName () { state.name = 'Tom'
} })