Vue3 项目中使用setup()函数报错,script setup cannot contain ES module exports

当使用vue3+vite使用语法糖setup时,要注意写法.

第一种写法就是<script> 标签里面配置 setup,另一种是:export default 类里配置 setup() 方法,

我们只需要使用一种方法即可,混用了就会报错了。

解决: 第一种

<script setup>

import {ref} from 'vue'

import { Toast } from 'vant';

import Index from '../pages/Index.vue'

import Team from '../pages/Team.vue'

const onClickLeft = () => alert(1);

const onClickRight = () => alert(2);

const active = ref('index');

const onChange = (index) => Toast(`标签 ${index}`);

</script>

第二种:

<script>

import {ref} from 'vue'

import { Toast } from 'vant';

import Index from '../pages/Index.vue'

import Team from '../pages/Team.vue'

export default {

name: 'BasicLayout',

setup() {

const onClickLeft = () => alert(1);

const onClickRight = () => alert(2);

const active = ref('index');

const onChange = (index) => Toast(`标签 ${index}`);

return {

onClickLeft,

onClickRight,

onChange,

active

};

}

};

猜你喜欢

转载自blog.csdn.net/hfhchs/article/details/129027601