Vue.js 組件變成 Webpack 中的組件
[英]Vue.js component into a component in Webpack
問題描述
我從教程中獲取了以下代碼，我想修改它以便在 Webpack 中編譯.. 在表單模板腳本和 css 中。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div id = "counter-event-example">
<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
<button-counter
v-for = "(item, index) in languages"
v-bind:item = "item"
v-bind:index = "index"
v-on:showlanguage = "languagedisp"></button-counter>
</div>
</div>
<script type = "text/javascript">
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
var vm = new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
</script>
</body>
</html>
我的問題是我有一個名為“按鈕計數器”的“子組件”..
1 個解決方案
解決方案1
1 已采納 2019-02-26 16:58:14
使用單個文件組件並在那里定義您的按鈕計數器和其他組件。
一般來說，如果你已經在使用Webpack ，如果你對所有事情都使用 SFC，生活會更輕松。
Vue.js-通過Webpack注冊圖表組件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.