Question

我尝试将plugin用于Vue 2的项目，但得到了如下Vue警告。

[Vue警告]：无法安装组件：模板或渲染功能定义

内部vue组件：

import ToggleButton from 'vue-js-toggle-button'
export default {
  components: { ToggleButton }
}

然后，

<toggle-button :value="true" :labels="{checked: 'Foo', unchecked: 'Bar'}"/>

该插件并不受欢迎，我们非常感谢任何帮助。

Answer 1

为了完整性（Vue SFC类）：

src / main.ts：

import Vue from 'vue';
import ToggleButton from 'vue-js-toggle-button';

Vue.use(ToggleButton);

new Vue({
  ...
  render: h => h(App)
}).$mount('#app');

src / components / MyComponent.vue：

<template>
  <toggle-button />
</template>

<script lang="ts">
import { ... } from "vue-property-decorator";
// do NOT import the component in here

@Component({
  components: {
    // do NOT declare the component in here
  }
})
export default class MyComponent extends Vue {
}
</script>

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

Answer 2

您不会将切换按钮导出到另一个组件中。您可以在要使用它的任何组件中导入它，并告诉Vue将其与Vue.use(ToggleButton)一起使用。然后，您可以在组件的模板中使用它，然后导出整个组件！

示例是：

<template>
  <toggle-button #someOfYourValues#></toggle-button>
</template>

在这里，你不要导入任何ToggleButton！您只需将其用作组件内的标签即可！

让我们转到主js文件，在该文件中创建所有Vue实例。通常，它看起来类似于：

<script>
  import Vue from 'vue'
  import ToggleButton from 'vue-js-toggle-button'
  Vue.use(ToggleButton)

  new Vue({
    el: #yourDivInTheBaseHTMLFile
    # some other stuff for your vue instance
  })
</script>

我在我当前的Vue项目中测试了它，这是一个包含大量组件的待办事项列表。当你执行Vue.use()时，它实际上在每一个内部都有效。如果需要，我可以将您链接到项目，以便您可以查看，但这个简单的解释应该这样做;）

无法使用vue-js-toggle-button安装组件

2 个答案: