Vue：把组件作为自定义元素来使用以及Identifier ' simple_couter' is not in camel case问题解决

这里介绍两种组件调用的方法：

1、直接在当前组件（HelloVue.vue）中使用Vue.component插入一个子组件button-counter：

其中Vue.component('button-counter', { .... }) 是子组件的内容，template是子组件的页面内容。

PS：data必须是一个函数

当我们定义这个组件时，你可能会发现它的data并不是像这样直接提供一个对象：

data: function () {
  return {
    count: 0
  }
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

由于你可以将组件进行任意次数的复用（注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建），如果 Vue 没有这条规则，点击这个按钮就可能会影响到其他所有实例。

 

2、我们也可以直接在当前组件页面上引入其他组件：

在被当做标签使用的组件中，我们像往常一样创建一个组件即可：

例如这里我们使用的组件simple-counter.vu：

在页面上的展现效果——上面是simple-counter组件的效果，下面是button-counter的效果：

注意如果出现这样的error信息：Identifier 'simple_counter' is not in camel case

这里建议组件的引用命名使用驼峰命名法即可~改成simpleCounter就可以正确运行啦！