小编Tho*_*asE的帖子

我正在使用 vue.js 和 vuetify 进行一些网页设计，并且在尝试在 vuetify v-tab 中显示 vue 组件时遇到了问题。

我的 vue 组件中有以下标记：

<v-tabs>
    <v-tab href="#search">
        Søg
    </v-tab>
    <v-tab href="#rare">
        SU
    </v-tab>
    <v-tab href="#review">
        2019
    </v-tab>

    <v-tabs-items>
        <v-tab-item key="search">
            <ObservationSelection />
        </v-tab-item>
        <v-tab-item key="rare">
            <ObservationSu />
        </v-tab-item>
        <v-tab-item key="review">
            <ObservationAaretsGang />
        </v-tab-item>
    </v-tabs-items>
</v-tabs>

似乎由于某种原因，v-tab-item 没有正确“连接”到 v-tab，所以我在每个 v-tab 中看不到任何内容。

如果在 v-tab 之外使用，每个相关组件都可以很好地工作。

假设在 VueJS 项目中，我有一个如下所示的 HelloWorld.js 文件：

export default {
addNumbers: function (a,b) {
    return a+b;
    }
}

它在 HelloWorld.vue 中的使用如下：

<template>
  <div>
    <h1>{{addNumbers(1,2)}}</h1>
  </div>
</template>

<script>
import helloWorldJS from './HelloWorld.js'

export default {
  name: 'HelloWorld',
  methods: {
    addNumbers: function(a,b) {
      return helloWorldJS.addNumbers(a,b);
    }
  }
}
</script>

我的痛苦来自于必须在 HelloWorld 组件的方法部分中“复制” addNumbers 函数。

有没有一种简单的方法可以使外部 addNumbers 函数从模板部分可用？

我正在尝试为 VueJS3 构建自定义 HTML<input>组件。我一直在关注这个教程：

https://dev.to/viniciuskneves/vue-custom-input-bk8

到目前为止，我设法让CustomInput.vue组件正常工作并将修改后的值发送回父 App.Vue。

<template>
<label>
{{ label }}
<input type="text" :name="name" :value="value" @input="onInput" @change="onChange" />
  </label>
</template>

<script>
export default {
  name: 'CustomInput',
      props: {
    label: {
      type: String,
      required: true,
    },
    value: {
      type: String,
      required: true,
    },
  },
  computed: {
    name() {
      return this.label.toLowerCase();
    },
  },
  methods: {
    onInput(event) {
      this.$emit('input', event.target.value);
    },
    onChange(event) {
      this.$emit('change', event.target.value);
    },
  },
}
</script>

我不明白的是 - 父 App.vue 组件如何检测发出的事件？我看不到它发生，我在教程中找不到它。

我的App.Vue看起来像这样：

<template> …