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

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

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

<template>
  <div id="vue">
    <div id="components-demo">
     <button-counter></button-counter>
    </div>
  </div>
</template>

<script type="text/javascript">
// 引入
import Vue from 'vue'

export default {
  ......        // 组件本身的一些变量的定义放在这里
}

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
</script>

<style type='text/css'>
</style>

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

PS：data必须是一个函数

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

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

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

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

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

 

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

<template>
  <div id="vue">
    <div>
     <simple-counter></simple-counter>  
    </div>
  </div>
</template>

<script type="text/javascript">
// 引入其他组件
import simpleCounter from './simple-counter.vue'

export default {
  // 这里需要将模块引出，可在其他地方使用
  components: {
    'simple-counter': simpleCounter
  },
  data () {
    ......      // 当前组件的变量等声明在这里
  },
  methods: {
    .....
  }
}
</script>

<style type='text/css'>
</style>

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

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

<template>
  <div id="app">
    <button v-on:click="counter += 1">{{ counter }}</button>
  </div>
</template>

<script type="text/javascript">
// 注册
export default {
  data () {
    return {
      counter: 0
    }
  }
}
</script>

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

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

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