标签: vue-script-setup

我正在努力去computed工作<script setup>：

<template>
  <div>
    <p>{{ whatever.get() }}</p>
  </div>
</template>


<script setup>
import {computed} from "vue";

const whatever = computed({
    get() {
        console.log('check')
        return 'check?';
    }
})
</script>

该语句console.log()通过了，但return似乎抛出了一个错误：

check
Vue warn]: Unhandled error during execution of render function 
  at <Cms>
Uncaught TypeError: $setup.whatever.get is not a function
at Proxy.render (app.js?id=d9e007128724c77a8d69ec76c6c081a0:39550:266)
at renderComponentRoot (app.js?id=d9e007128724c77a8d69ec76c6c081a0:25902:44)
at ReactiveEffect.componentUpdateFn [as fn] (app.js?id=d9e007128724c77a8d69ec76c6c081a0:30019:57)
at ReactiveEffect.run (app.js?id=d9e007128724c77a8d69ec76c6c081a0:23830:29)
at setupRenderEffect (app.js?id=d9e007128724c77a8d69ec76c6c081a0:30145:9)
at mountComponent (app.js?id=d9e007128724c77a8d69ec76c6c081a0:29928:9)
at processComponent (app.js?id=d9e007128724c77a8d69ec76c6c081a0:29886:17)
at patch …

我使用Vue 3.1.1

我在实验阶段使用脚本设置和单个文件组件。使用脚本设置，我了解defineProps、defineEmit和useContext，但我不了解如何使用渲染函数。

<script lang="ts" setup>
import { defineProps } from 'vue'

const props = defineProps<{
    text: string
}>()

const handleClick = () => {
    console.log('click!!')
}

// Render function...

/* The template I want to create.
    <button
        class="btn btn-primary"
        type="button"
        @click="handleClick"
    >
        {{ props.text }}
    </button>
*/
</script>

我想v-model在组件上添加 a 但收到此警告：

[Vue warn]: Component emitted event "input" but it is neither declared in the emits option nor as an "onInput" prop.

这是我的代码：

[Vue warn]: Component emitted event "input" but it is neither declared in the emits option nor as an "onInput" prop.

// Parent.vue
<template>
  <h2>V-Model Parent</h2>
  <Child v-model="name" label="Name" />
  <p>{{ name }}</p>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const name = ref('')
</script>

我试图重现本教程，但我被困住了，不知道我错过了什么。

{{ …

我有一个父组件，我需要调用其子组件之一中存在的方法：

<template>
  <div>
    <button @click="callChildMethod">
    <child-component ref="child" />
  </div>
</template>
<script>
  setup(props) {
    const child = ref(null)
    const callChildMethod = () => {
      child.doSomething()
    }

    return {
      child,
      callChildMethod
    }
  }
</script>
  

子组件包含doSomething方法：

const doSomething = () => { console.log('calling method....') }

由于我使用的是 VueJS3 和 Composition API，因此我的方法是使用模板引用来调用子组件中的方法。显然不起作用，但我看不出我错过了什么。有人对这个有线索吗？提前致谢

导出默认语句似乎在内部不起作用<script setup>。

如果我尝试将其导出为test.vue：

<template>
  <div id="test" class="test">

  </div>
</template>


<script setup>
const x = 5

export default {
    x
}
</script>


<style scoped lang="scss">
</style>

然后将其导入另一个blog.vue：

<script setup>
import x from './test'
</script>

我收到大量错误：

app.js?id=3b6365f542826af47b926162803b3ef6:37396 Uncaught Error: Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of null (reading 'content')
    at selectBlock (:3000/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/vue-loader/dist/select.js:23:45)
    at Object.loader (:3000/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/vue-loader/dist/index.js:67:41)
    at Object../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/backend/components/test.vue?vue&type=script&setup=true&lang=js (app.js?id=3b6365f542826af47b926162803b3ef6:37396:7)
    at __webpack_require__ (app.js?id=3b6365f542826af47b926162803b3ef6:64806:42)
    at Module../resources/vue/backend/components/test.vue?vue&type=script&setup=true&lang=js (app.js?id=3b6365f542826af47b926162803b3ef6:60116:217)
    at __webpack_require__ (app.js?id=3b6365f542826af47b926162803b3ef6:64806:42)
    at Module../resources/vue/backend/components/test.vue (app.js?id=3b6365f542826af47b926162803b3ef6:59477:102)
    at __webpack_require__ (app.js?id=3b6365f542826af47b926162803b3ef6:64806:42) …

我是 Vue3 的新手，正在努力处理一些示例。我有一个简单的登录组件，应该重定向到另一个页面，但事实并非如此。

这是我的模板：

这是我的脚本：

问题是 this.$router 不可用，因为 this 未定义。我能找到的所有示例都使用此编码模式，但据我所知，此变量在脚本设置编码模式中未定义。还有什么选择呢？

谢谢。

我正在将组件从常规 Vue 3 Composition API 重构为脚本设置语法。初始点：

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { mapGetters } from 'vuex';

export default defineComponent({
  name: 'MyCoolBareComponent',
  computed: {
    ...mapGetters('auth', ['isAdmin']),
  },
});
</script>

当前Vue v3 迁移文档，SFC Composition API Syntax Sugar (<脚本设置>)，链接到此 RFC 页面：https://github.com/vuejs/rfcs/pull/182

使用计算反应性属性只有一个示例：

export const computedMsg = computed(() => props.msg + '!!!')

由于当前没有可用的 Vuex 4 文档提到<scrip setup>，所以我仍然不清楚在使用此语法时应该如何使用？mapGetters或者使用 Vuex 4 解决这个问题的正确方法是什么？

我遇到了 vue3、ts、vue cli 的错误，它说 Module '"c:/Users/USER/Documents/top-secret-project/src/components/Features/Features.vue"' has no default export. 从文件导入组件时我不知道为什么这个特定组件决定现在工作。

这是 Features.vue

<script lang="ts">
import Feature from "./Feature.vue";
</script>

<template>
  <Feature />
</template>

喜欢标题，关于链接： 新的script setup（不含参考糖）

<template>
  <TopNavbar title="room" />
  <div>
    {{ no }}
  </div>
</template>

<script setup>
import TopNavbar from '@/layout/TopNavbar.vue'
import { defineProps, reactive } from 'vue'

defineProps({
  no: String
})

const state = reactive({
  room: {}
})

const init = async () => {
  // I want use props in this
  // const { data } = await getRoomByNo(props.no)
  // console.log(data);
}
init()

</script>

<style>
</style>

如何app.config.globalProperties 访问<script setup lang="ts">？

我已经寻找了几种方法：就像这篇 SO post 一样，并尝试组合以下元素：

\\ main.ts

import mitt from 'mitt'
const emitter = mitt()

declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    emitter: typeof mitt
  }
}

app.config.globalProperties.emitter = emitter

尝试过在composition-api中使用包装..也不走运

\\ bus.ts

import { getCurrentInstance } from 'vue'

const app = getCurrentInstance()
const bus = app.appContext.config.globalProperties.emitter // app is undefined

export const useBus = () => ({ bus })