Vue学习笔记（四）

一:组件
  在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，会有相同的部分。但是如果每个页面都独自开发，这无疑增加了开发的成本。所以会把页面的各个部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
1.创建组件
  组件是根据一个普通的配置对象创建的，所以要开发一个组件，只需要写一个配置对象即可，该对象和vue实例的配置几乎是一样的。

Var myComp={
	data(){
		Return{
		}
	},
	computed:{
	},
	Methods:{
	}
	Template:``
}

和vue实例的区别：
  无el属性（原因：不与页面的元素绑定，为了组件的复用）；
  data必须是一个函数，该函数返回的对象作为数据（这点很重要）；
  由于没有el配置，组建的虚拟dom树必须定义在template或者render中。
2.注册组件
  全局注册：一但全局注册了一个组件，整个应用任何地方都可以使用该组件。
  注册方式：Vue.component(‘MyComp’,MyComp);
  参数1：组件名称，将来在模板中使用该组件时，会使用该名称。
  参数2：组件对象
  局部注册（常用）：
  一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。因此，对于一些并不频繁使用的组件，会采用局部注册。注册方式是在要使用的组件或者组建的实例中增加一个配置。

Components:{
	MyComp:MyComp
	//属性名为组件名称，模板中使用该名称
	//属性值为组件配置对象。
	MyComp//推荐使用ES6写法
}

3.使用组件
  在模板中使用组件，把组件名当做html元素使用即可。
但注意：
  1.组件必须有结束<MyComp/>；
  2.组件的命名：短横线命名法（<my-comp/>）或者大驼峰命名法（<MyComp/>）。
4.组件树
  组件之间可以相互嵌套使用。
二：组件通信
1.父向子传递props
  可以在子组件中申明可以接受哪些属性props：[“p1”,’p2’,’p3’]。
  使用组件时会创建组件的实例，而组件的属性会被提取到vue的实例中，因此可以在模板中使用。注意：在子组件中，属性是只读的，绝不可以更改，这叫做单向数据流。
子组件：

Vue.component("biaoti",{
 // 直接使用props接收到的属性来渲染页面 
 template:'<h1>{{title}}</h1>',
 props:[title] 
 // 通过props来接收一个父组件传递的title属性 
})

父组件：

<div id="app">
	//在父组件中使用子组件
	<biaoti :title="msg"></biaoti>
</div>
new Vue({ 
	el:"#app", 
	data:{
		msg: "向子组件传递的标题变量" 
	} 
});
//这里用到了绑定属性:title,绑定一个变量

2.子向父通信
  上面说到：在子组件中，属性是只读的，绝不可以更改，这叫做单向数据流。子组件接收到父组件属性后，默认是不允许修改的，怎么办？既然只有父组件能修改，那么修改的方法一定是放在父组件中。
  vue提供了一个内置的this.$emit函数，用来调用父组件绑定的函数。可以通过v-on指令将父组件的函数绑定到子组件上：
父组件：

<div id="app"> 
	<h2>num:{{num}}</h2> 
	<!--此处引用子组件@plus --> 
	<counter @plus="numPlus" :snum="num"></counter> 
</div>
var app = new Vue({ 
	el:"#app", 
	data:{
		num:0 
	},
	methods:{ 
		//父组件中定义操作num的方法 
		numPlus(){
			this.num++; 
		}
	} 
});

子组件：

//定义子组件 
const counter = {
	template: ` <div><button @click="incrNum">+</button></div> `,
	props:["snum"],
	methods: {
		//点击子组件调用的方法 
		incrNum(){
			//通过$emit调用父组件绑定的函数
			return this.$emit("plus"); 
		} 
	}
};