标签: vue-script-setup

一般而言，Vue 新手，目前使用 3.2.37，我可能误解了composition api\xe2\x80\x99s DefineExpose 指令的正确用法，如下所述： https: //vuejs.org/api/sfc-script-setup.html #defineexpose

还有一些线程，解释如何从内部公开成员，<script setup>例如Calling method on Child Component - Composition API。但不知何故，我无法设法version公开子组件的常量引用HelloWorld，以便可以将其version插值到app组件中。

应用程序.vue：

<script setup>\nimport HelloWorld from \'./components/HelloWorld.vue\'\n</script>\n\n<template>\n  <main>\n    <HelloWorld />\n    <h1>version:{{HelloWorld.version}}</h1>\n  </main>\n</template>\n

你好世界.vue：

<script setup>\nimport { ref } from \'vue\';\n\nconst version = ref(\'1.0.0\');\n\ndefineExpose({ version });\n</script>\n\n<template>\n    <div>\n        <h3> You\xe2\x80\x99ve successfully created a project with Vue.js and Vuetify. </h3>\n    </div>\n</template>\n

图像：\n版本 1.0.0 未显示

当我在 vue 3 设置代码块中编写此代码以获取遵循此答案的输入值时，这是代码的一部分：

import { defineComponent } from "vue";
import { defineProps, defineEmits } from 'vue'

export default defineComponent({
  setup() {
    const props = defineProps({
      modelValue: String
    })
    const emit = defineEmits(['update:modelValue'])
    function updateValue(value: any) {
      emit('update:modelValue', value)
    }
}

应用程序运行时显示错误：

option.js:17388 Uncaught TypeError: emit is not a function
    at Proxy.updateValue (option.js:17388:13)
    at onInput._cache.<computed>._cache.<computed> (option.js:17428:78)
    at callWithErrorHandling (option.js:7359:22)
    at callWithAsyncErrorHandling (option.js:7368:21)
    at HTMLInputElement.invoker (option.js:15384:90)

我已经定义了emit，为什么仍然告诉我emit不是一个函数？这是我的 vue3 组件的完整代码：

<template>
  <div id="app">
    <div id="wrap">
      <label> 
        {{ username }}
      </label> …

有没有办法从 Vue3 中断/返回<script setup>？

<script setup lang="ts">
  // code is not working, for illustration purpose
  if (!process.client) return

  // do something...
  const count = ref(0)
</script>

我有这个组件 A 和一个公开的方法send

A.vue：

<script setup lang="ts">
function send(data: string) {
  console.log(data)
}

defineExpose({ send })
</script>

以及导入该组件的组件B

B.vue

<template>
  <ComponentA ref="a" />
</template>
<script setup lang="ts">
import ComponentA from '@/component-a.vue'

const a = ref()

onMounted(() => a.value.send(22)) // should be a type error
</script>

如何键入导入的组件，以便当我通过 refs 调用其方法时，它会检查公开的方法名称和传递参数的类型？

我尝试了谷歌搜索：ComponentPublicInstance<typeof ComponentA>但它似乎没有检查方法。

编辑：

这是 shims-vue.d.ts （由 vue-cli 生成）：

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

编辑： …

我使用（typescript、babel、linter）创建了一个入门项目vue ui。一切工作正常，但我不太明白如何使Composition API的setup方法工作。它根本没有被调用（日志输出为空）这就是我被困住的地方。

• vue：3.0.0-rc.10

• vue-cli：4.5.4

  <script lang="ts">
   import { Options, Vue } from 'vue-class-component'
   import HelloWorld from './components/HelloWorld.vue'
  
   @Options({
     components: {
       HelloWorld
     },
     setup () {
       console.log('SETUP HERE')
     }
   })
   export default class App extends Vue {
     setup () {
       console.log('SETUP THERE')
     }
   }
   </script>
  

  Run Code Online (Sandbox Code Playgroud)

选项 API：

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'CustomName', // 
    inheritAttrs: false, // 
    setup() {
      return {}
    },
  })
</script>

如何做到这一点<script setup>，是否有等价于name和inheritAttrs喜欢defineProps和defineEmits？

<script setup>
  //  how to define them here?
</script>

我想从 <script setup> 块中的 <script> 访问“name”变量。我似乎不知道该怎么做。我尝试从“*.vue”导入选项，但这提示我安装模块“*.vue”。

<script>
export default {
 name: 'some name'
}
</script>
<script setup>
 //use the 'name' variable here
</script>