Vue.js组件

Vue.js组件
组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

示例：

<div id="app">
			<button-counter></button-counter>
		</div>
		
		<script type="text/javascript">	
			//注册
			Vue.component('button-counter',{
				data: function() {
					return {
						count: 0
					}
				},
				template: '<button v-on:click="count++" >You clicked me {{ count }} times.</button'
			})
			//创建根实例
			new Vue({
				el:'#app'
			})
		</script>
		

上述代码实现了点击计数的功能：

组件是可复用的，你可以任意次数的复用

data必须是一个函数
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。
全局组件：
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
局部组件：
在实例选项中注册局部组件，这样组件只能在这个实例中使用。

prop：

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”。

		<!-- prop -->
		<div id="future">
			<future-y future="This is a test!!"></future-y>
		</div>
		<script>
			//prop
			//注册
			Vue.component('future-y',{
				//声明props
				props: ['future'],
				template: '<span>{{ future }}</span>'
			})
			//创建根实例
			new Vue({
				el: '#future'
			})
		</script>

结果如下：
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

可能在 data 里有一个数组：

		<div id="app2">
			<blog-post v-for="post in posts" v-bind:keys="post.id" v-bind:title="post.title">		
			</blog-post>
		</div>
		<script>
			Vue.component('blog-post',{
				//声明props
				props: ['keys','title'],
				template: '<p>{{ keys }}, {{ title }}</p>'
			})
			new Vue({
			  el: '#app2',
			  data: {
			    posts: [
			      { id: 1, title: 'My journey with Vue' },
			      { id: 2, title: 'Blogging with Vue' },
			      { id: 3, title: 'Why Vue is so fun' }
			    ]
			  }
			})
		</script>

以上代码结果如下;

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

every component must have a single root element (每个组件必须只有一个根元素)。但是可以通过将所有内容包括在一个父元素内来修复这个问题。

自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

		<div id="app">
			<div id="counter-event-example">
				<p>{{ total }}</p>
				<button-counter v-on:increment="incrementTotal"></button-counter>
				<button-counter v-on:increment="incrementTotal"></button-counter>
			</div>
		</div>
		
		<script type="text/javascript">
			Vue.component('button-counter',{
				template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
				data: function(){
					return {
						counter: 0
					}
				},
				methods: {
				    incrementHandler: function () {
				      this.counter += 1
				      this.$emit('increment')
				    }
				  }
			})
			new Vue({
			  el: '#counter-event-example',
			  data: {
			    total: 0
			  },
			  methods: {
			    incrementTotal: function () {
			      this.total += 1
			    }
			  }
			})
		</script>

以上代码运行效果如下图：