前端vue学习曲线（13）组件

1.定义组件

// 定义一个名为 button-counter 的新组件
	Vue.component("button-counter", {
		data() {
			return {
				count: 0
			}
		},
		template: '<button @click="count++">You clicked me {
  { count }} times.</button>'
	})

2.使用

<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
<p>注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。</p>

注意：

• 一个组件的 data 选项必须是一个函数
• 先定义组件，然后在创建vue对象

3.prop传数据

<blog-post title="props1"></blog-post>

Vue.component("blog-post", {
		props: ['title'],
		template: '<h3>{
  {title}}</h3>'