Vue组件基础

示例：

组件是可复用的Vue实例，且带有一个名字：在这个例子中是<app-text>我们可以通过new Vue创建的Vue根实例中，把这个组件作为自定义元素来使用。

<div id="app">
		<app-text></app-text>
	</div>
	<div id="app1">
		<app-text></app-text>
	</div>
	<script>
		Vue.component('app-text',{
			data:function(){
				return{
					num:0
				}
			},
			template:'<h1><button @click="addnum">点击{{num}}</button></h1>',
			methods:{
				addnum(){
					this.num++;
				}
			}
		})
		new Vue({el:"#app"});
		new Vue({el:"#app1"})
        //
	</script>

全局注册：在这里组件名就是Vue.component的第一个参数。

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的Vue根实例（new Vue）当中

Vue.component('my-component-name-1'{/*......*/})
Vue.component('my-component-name-2'{/*......*/})
Vue.component('my-component-name-3'{/*......*/})

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

组件命名方式：

1.使用kebab-case(短横线分割命名)。

2.使用PascalCase(驼峰命名方式)。

在所有的自定义组件也是如此，也就是说这三个组件在各自内部都可相互使用。