标签: vue-script-setup

选项 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>

Vue 实例可以允许您创建嵌套视图模型。例如，考虑以下情况

new Vue({
  el: '#app',
  data: {
    form: {
      firstName: "Joe",
      lastName: "Bloggs"
    }
  },
  computed: {
    name: function () {
        return this.form.firstName + ' ' + this.form.lastName;
    }
  }
});

正如您所看到的，有一个嵌套的表单数据对象：form.firstName 和form.lastName。我可以使用以下命令将此视图模型绑定到 HTML：

<div id="app">
  <form>
    <label>
      First:
      <input type="text" v-model="form.firstName">
    </label>
    <label>
      Last:
      <input type="text" v-model="form.lastName">
    </label>
  </form>
  <div>
    You are: {{name}}
  </div>
</div>

这是此 Vue.js 示例的 JS Fiddle

现在，我的问题是：是否有一种简单的方法（例如指令）来创建嵌套绑定范围，使我可以在没有前面的“表单”的情况下寻址firstName和lastName？

Knockout.js 具有with 绑定，允许您显式指定与视图模型相关的绑定范围。这是一个 JS Fiddle，显示 Knockout.js 使用 with 绑定

Vue 中是否有一个类似于 Knockout 的简单绑定绑定 …

我正在使用实验脚本设置来创建学习环境。我有一个自制的导航栏，打开一个组件。

我在使用该<component :is="" />方法时遇到问题。此方法在组件基础 -> 动态组件下的文档中进行了描述

在 Vue 3 Composition API 中，它按预期工作：

<template>
  <NavigationBar
    @switchTab="changeTab"
    :activeTab="tab"
  />
  <component :is="tab" />
</template>

<script>
import { ref } from 'vue'
import NavigationBar from './components/NavigationBar.vue'
import TemplateSyntax from './components/TemplateSyntax.vue'
import DataPropsAndMethods from './components/DataPropsAndMethods.vue'

export default {
  components: {
    NavigationBar,
    TemplateSyntax,
    DataPropsAndMethods
  },
  setup () {
    const tab = ref('DataPropsAndMethods')
    function changeTab (newTab) {
      tab.value = newTab
    }

    return {
      changeTab,
      tab
    }
  }
}
</script>

我的script …

我有一个名为 的子组件Navbar。注销是导航栏中的一个选项。

<a @click="(event) => {event.preventDefault();}">
  Logout 
</a>

我已将其导入Navbar到名为 的父组件中Home。并且在Home组件中，有一个div（模态），

<div class="modal" v-if="modal">

仅当模态 ref 为 时，此模态才会显示true。

<script setup>
import Navbar from './components/Navbar.vue';
import {ref} from 'vue';

const modal = ref(false);

</scipt>

我的问题是，当我们单击子组件中的选项时，如何设置此模态ref值。truelogoutNavbar

正如这里提到的，脚本设置中引入的所有顶级绑定都暴露给模板。

问题：如何排除其中一些？像私有变量之类的东西只能在脚本设置中使用，但不能传递给模板

我注意到，要在 Vue 3 组合 api 中创建模板引用<script setup>，我应该创建一个与引用值完全相同的变量名称。

例如，在Vue 3 文档中：

<template>
  <div ref="root">This is a root element</div>   <--- notice the ref name "root"
</template>

<script>
  import { ref, onMounted } from 'vue'

  export default {
    setup() {
      const root = ref(null)   <---- and the variable name should be "root" too

      onMounted(() => {
        console.log(root.value) 
      })

      return {
        root
      }
    }
  }
</script>

我想知道是否可以像 Vue 2 那样使用 ref ，因为我有一些元素，其 ref 是随机字符串，并且它只需在$refs对象上传递名称即可在 Vue 2 上工作。

<div …

Vue版本：3.0.11

使用以下代码：

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup>
  import { ref } from 'vue'

  export const count = ref(0)

  export const inc = () => count.value++
</script>

我有：

ERROR  Failed to compile with 1 error
 error  in ./src/views/HyperScript.vue?vue&type=script&setup=true&lang=js

Syntax Error: TypeError: Cannot read property 'content' of null


 @ ./src/views/HyperScript.vue?vue&type=script&setup=true&lang=js 1:0-293 1:0-293 1:294-576 1:294-576
 @ ./src/views/HyperScript.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.6.175:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

我创建了一个带有反应性 API 的简单状态管理

我的商店文件如下所示：

import { reactive, watch  } from "vue";

const state = reactive({
   form : {
    service_id : null
   }
})

 watch('state.form.service_id', (newVal, oldVal) => {
     console.log('service changed');
 }, { deep: true });
 

export default {
  state, 
}

我试图观察 的变化state.form.service_id，但出现以下错误：

[Vue warn]: 无效的监视源：state.form.service_id 监视源只能是 getter/effect 函数、ref、反应对象或这些类型的数组

如果我用以下代码替换手表代码，那么它就可以工作。

 watch('state.form', (newVal, oldVal) => {
     console.log('form changed');
 }, { deep: true });

但我需要留意 的变化state.form.service_id。有什么解决办法吗？

在我的代码中，我已经（或希望）在某些时候使用复杂的 prop 类型。下面是我想到的示例：

enum Country {
  [...]
}

interface IPerson {
  firstname: string;
  lastname: string;

}

interface IAddress {
  street: string;
  houseNo: string;
  city: string;
  postalCode: string;
  country: number;
}

interface ITestComponentProps {
  person: IPerson;
  addresses: Array<IAddress>;
}

那么我想用这一切来实现的TestComponent.vue是：

[...]
const props = defineProps<ITestComponentProps>();
[...]

我现在期望的是某种错误消息或任何告诉我在尝试如下操作时没有提供正确结构的道具的信息：

[...]
<TestComponent :props="'foo'" />
[...]

Vue 的文档中有如下说明：

目前不支持复杂类型和从其他文件导入类型。将来有可能支持类型导入。

有谁知道是否有解决方法来获得所需的行为或何时支持复杂类型？

我只见过每个组件有一个 onMounted() 的示例。
我想对每个功能使用 onMounted() 。
有什么问题吗？

我的组件.vue

<script setup>
import { onMounted } from 'vue';

// Feature A
onMounted(() => {
  // Do something.
});

// Feature B
onMounted(() => {
  // Do something.
});
</script>