vue3 setup模式（props/emit）

最新推荐文章于 2024-04-25 10:34:52 发布

止语之语

最新推荐文章于 2024-04-25 10:34:52 发布

阅读量936

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/qq_36685539/article/details/130809832

版权

vue3的setup语法糖模式写法改变

<FinanceModal v-model:visible="vreport" :data="reportData" @addFlag="addFlag"></FinanceModal>

一. 正常模式

<script lang="ts">
export default defineComponent({
	name:'FinanceModal',
    props:{
    	data:{type:Object,default:{}}
    },
    components:{ Chart1,Chart2},
    directives: {clickOutside,},
    setup(props, context) {
	    watch(() => props.data,(val) => {
	        setData(val)
	     });
		context.emit('update:visible', false);
		context.emit('addFlag',false)
	}
})
</script>

二. setup

<script lang="ts" setup>
const emit = defineEmits(['update:visible','addFlag']);
const props = defineProps(data:{type:Object,default:{}});
watch(() => props.data,(val) => {
   setData(val)
});
emit('update:simVisible',visible);
emit('addFlag',false);
</script>