方法 1
サブコンポーネントでのセットアップ構文シュガーの使用を放棄する
<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>
もともと、構文シュガーでエクスポートするためにエクスポートを使用したかったのですが、この警告が表示されました
@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.
方法 2
// 子组件
<script setup>
import {
defineExpose } from 'vue'
const childFun = () => {
console.log('我是子组件方法')
}
// 重点!!这里需要使用defineExpose暴露出去
defineExpose({
childFun
})
</script>