方法一
子组件 中放弃使用setup语法糖
<template>
<div></div>
</template>
<script lang="js">
import {
defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const conts = ref("我是子组件");
const sonFn = () => {
conts.value = "我被父组件里调用了子组件的方法修改了数据";
};
return {
conts, sonFn };
},
});
</script>
本来想使用export在语法糖中导出,出现该警告
@vue/compiler-sfc] <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.
方法二
// 子组件
<script setup>
import {
defineExpose } from 'vue'
const childFun = () => {
console.log('我是子组件方法')
}
// 重点!!这里需要使用defineExpose暴露出去
defineExpose({
childFun
})
</script>