如何在我的组件 VueJS 上添加按钮计数答案

【问题标题】：How can add a button count on my component VueJS如何在我的组件 VueJS 上添加按钮计数
【发布时间】：2020-12-25 21:26:51
【问题描述】：

我开始学习 VueJS，但我无法在我的组件上添加按钮计数，我正在使用 laravel！

我的 app.js：

window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Home from './components/HomeComponent.vue'
import Categorie from './components/CategorieComponent.vue'


let routes = [
{
    path: '/',
    component: Home
},
];
const app = new Vue({
mode: 'history',
el: '#app',
router: router,
data: {
    message: 'Hello Vue'
}
});

Vue.component('button-counter', {
data: function () {
    return {
        count: 0
    }
},
template: '<button v-on:click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
});

我的 HomeComponent.vue：

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card-body">
                <h1 class="card-tite">Bienvenue sur mon site</h1>
                <button-counter></button-counter>
            </div>
        </div>
    </div>
</div>
</template>

我添加了一个 div “app”，并在此添加了一个 <router-view><router-view> :)

我的控制台 VueJS 说我：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

【问题讨论】：

你是否在 HomeComponent.vue 中导入并注册了组件？
如何在 Home 中添加组件？

标签： laravel vue.js

【解决方案1】：

如错误消息中所述，您必须先注册您的组件，然后才能使用它。查看this article 了解更多信息。

在您的示例中，您必须将 Vue.component('button-counter', { ... }) 部分从您的应用初始化中移入。它只是定义的另一个组件（类似于您的HomeComponent）。

像这样更改您的app.js：

window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Home from './components/HomeComponent.vue'
import Categorie from './components/CategorieComponent.vue'


let routes = [
  {
    path: '/',
    component: Home
  },
];

Vue.component('button-counter', {
  data: function () {
    return {
        count: 0
    }
  },
  template: '<button v-on:click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
});

const app = new Vue({
  mode: 'history',
  el: '#app',
  router: router,
  data: {
    message: 'Hello Vue'
  }
});

...您的示例应该可以正常工作。

看看this running fiddle with your example。

【讨论】：