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

Posted 2023-04-11 hfhchs

当使用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

;

;

Vue3（setup函数介绍）

Composition Api
setup函数是一个新的组件选项。作为在组件内使用Composition API的入口点。
调用时机：
setup函数会在beforeCreate钩子之前被调用
返回值
如果setup返回一个对象，则对象的属性可以在组件模板中被访问
参数
接收俩个参数

setup.vue

<template>
	<div>
		setup
	</div>
</template>

<script>
	export default{
		setup(){
			console.log('setup.....')
		},
		beforeCreate() {
			console.log('beforeCreate...')
		},
	}
</script>

<style>
</style>

 app.vue

<template>
	<comp-setup>
		
	</comp-setup>
</template>

<script>
/*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/
import CompSetup from './components/setupview'
export default {
  name: 'App',
  components: {
	  CompSetup,
  }
}
</script>

<style>

</style>

接收参数：

setup.vue

<template>
	<div>
		{{ name }}
		<p>{{ user.username }}</p>
	</div>
</template>

<script>
	export default{
		//setup不能访问this
		//可以接收参数
		setup(props,context){
			// console.log('setup.....')
			//这种返回的数据不具有响应式
			// let name='tom'
			// return {
			// 	name,
			// }
			return {
				name:'tom',
				user:{
					username:'admin',
					password:'123'
				}
			}
		},
		beforeCreate() {
			// console.log('beforeCreate...')
		},
		props:{
			msg:String
		}
	}
</script>

<style>
</style>

 app.vue

<template>
	<comp-setup msg="welcome">
		
	</comp-setup>
</template>

<script>
/*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/
import CompSetup from './components/setupview'
export default {
  name: 'App',
  components: {
	  CompSetup,
  }
}
</script>

<style>

</style>