使用vue-js-toggle-button掛載組件失敗

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使用Vue.use(ToggleButton)。然後，您可以在組件的模板中使用它，然後導出整個組件！

例子是：

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

在這裏，你不導入切換按鈕的東西！您只需將它用作組件內的標籤即可！

讓我們繼續您的主要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()時，它會在每一個單獨的內部工作。 如果需要，我可以將您鏈接到項目，以便您可以看一看，但這個簡單的解釋應該這樣做;）