Vue组件基础

Vue组件

组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例。因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

注册及使用组件

<div id="app">
	<!--使用组件-->
	<my-component></my-component>
</div>
<script>
	// 注册一个组件：
	Vue.component('my-component', {
	      template: '<div>hello!</div>'
	})
	new Vue({
	      el: '#app'
	})
</script>

data 必须是函数

组件中的 data 是一个函数, vue 对象中的data是一个对象

组件就是 vue 的实例，所有 vue 实例中属性和方法，组件中也可以用，但是 data 属性必须是一个函数，因为组件会重复使用在多个地方，为了使用在多个地方的组件数据相对独立，data属性需要用一个函数来返回值。

<div id="app">
	<!--使用组件-->
  	<simple-counter></simple-counter>
  	<simple-counter></simple-counter>
  	<simple-counter></simple-counter>
</div>
<script>
    	// 定义组件
    	Vue.component('simpleCounter', {
      		template: '<button v-on:click="counter += 1">{{ counter }}</button>',
      		data: function () {
            		return {
            			counter: 0
          		}
      		}
    	})
   	new Vue({
      		el: '#app'
    	})
</script>

通过 Prop 向子组件传递数据

这个属性一般用来给组件传递值使用的
如果想给组件中传递参数，组件要显式地用 props 选项声明它预期的数据

<div id="app">
	<my-component name="zhangsan"></my-component>
</div>
<script>
    	Vue.component('myComponent',{
        	template:'<div>hello{{name}}</div>',
        	props:['name']
    	})
    	var vm = new Vue({
        	el:'#app'
    	})
</script>