我的Vuejs进阶之旅(五)：组件

本章节主要简要介绍Vue数据操作，常见问题及解决方法等内容。

4.1 内置组件

Vue内置组件

4.2 自定义组件

<component>元素是vue 里面的一个内置组件。

在<component>里面使用 :is，可以实现动态组件的效果。

以下演示如何创建一个包含多个子组件的 vue 实例。

1. vue代码部分：新建 vue 实例 “app”，这个实例的 components 里面，有3个组件，这些组件都有各自的模板。分别是 acomp，bcomp，ccomp

2. html 代码部分：使用vue 的内置组件 ，并使用 “is” 特性（需要通过v-bind 给 “is” 绑定一个值）。“is” 绑定的值传入一个组件名，就会切换到这个组件。

<div id="app">
	 <component :is="whichcomp"></component> 
	 <button @click="choosencomp('a')">a</button>
	 <button @click="choosencomp('b')">b</button>
	 <button @click="choosencomp('c')">c</button>
 </div>

//做一个包含列表组件
//需要给组件创建props--"todos",用于存放组件通过绑定prop --"todo"获取实例中的data数据"todolists"
var app=new Vue({
  el: '#app',
	components:{
		acomp:{
		   template:
				<p>这里是组件A</p>
			},
		bcomp:{
		   template:`
				<p>这里是组件B</p>
		},
		ccomp:{
			template:
				<p>这里是组件C</p>
		}},
	data:{whichcomp:""},
	methods:{
	   choosencomp (x) {
	   		this.whichcomp=x+"comp"
	   	}
   }
})

4.3 组件通信

组件通信主要包括父子组件通信、子组件间通信。

Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。

父组件主要通过props传递数据给子组件。

子组件主要通过$emit事件传递数据给父组件。

鉴于Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从子组件传到父组件，再传到子组件。
为了便于开发，Vue 推出了一个状态管理工具 Vuex，可以很方便实现组件之间的参数传递。

4.4 常见问题解析