Vue3 script setup语法糖（1）

原创已于 2023-01-02 14:10:45 修改 · 446 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue3 setup语法糖 #vue3弹出对话框

于 2023-01-02 13:56:31 首次发布

vue3 同时被 2 个专栏收录

8 篇文章

订阅专栏

Vue

5 篇文章

订阅专栏

文章介绍了Vue3中的setup语法糖如何简化组件的编写，通过对比选项式API和组合式API，展示了在父组件和子组件间的通信如何变得更简洁。例如，使用ref和setup直接处理状态，使用defineProps和defineEmits定义属性和事件，使得代码更加直观易懂。

最近接触了vue3 setup语法糖，相比较选项式api和组合式api，写法更简化，思路更容易理解，很容易上手，全力支持！

我还是以弹出对话框为例：

父组件：

<template>
<div>
<a-button @click="handleOpen()>弹出对话框</a-button>
<childIndex :export-visible="myVisible" :param-id="myId" @change-show="ChangedShow" />
</div>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import childIndex from './childIndex.vue';
const myVisible = ref<Boolean>(false);
const myId = ref<String>('');

function handleOpen(){
    myVisible.value = true;
}
function ChangedShow(data){
    if(data=='false'){
        myVisible.value = false;
    }
    else{
        myVisible.value = true;
    }
}
</script>

父组件中，setup语法糖去掉了name属性，直接按组件的名称替代了name.当然，如果想用name，可以沿用原来的方式，在setup语法糖前面加上

//给name赋值

export default {

name: 'ParentIndex',

};

</script>

子组件：

<template>
<a-modal v-model:visible="modalVisible" width="500px" title="子组件框" footer=null
@ok="handleOK" @cancel="handleClose">
<p>内容………………</p>
</a-modal>
</template>
<script lang="ts" setup>
import {ref,onMounted,watch,reactive} from 'vue';
const props = defineProps({
    exportVisible:{type:Boolean,default:false},
    paramId:{type:String,default:''}
});//defineProps:定义父组件用的属性，无需导入
const emits = defineEmits(['changeShow']);//defineEmits:定义父组件使用的事件，无需导入
const myId = ref<String>('');
const modalVisible = ref<Boolean>(false);
onMounted(()=>{
//定义组件挂载事件
});
watch(()=>props.exportVisible,//直接指定props的属性
(newValue)=>{
    modalVisible.value = newValue;//是否显示该组件框
    if(newValue ===true){
        myId.value = props.paramId;//父组件传入的参数
    }
};
function handleOK(){
    modalVisible.value = false;
    emits('changeShow','false');
}
function handleClose(){
    modalVisible.value = false;
    emits('changeShow','false');
}
</script>

相比之前的api的写法，这种语法糖写法确实简单了呢。