Vue为什么要组件化

不知道大家有没有思考过这个问题，什么是组件？Vue为什么要是组件化的开发方式呢？其实组件化的思想主要体现在：标准（有统一的规范）、分治（独立完成功能）、重用（可以重复使用）、组合（多个组件组合在一起共同完成一个大的功能）。组件化是Vue的核心思想，主要目的是为了代码重用。

组件在编程中的体现：
在这里插入图片描述

组件通信的方式

1.父组件→子组件

①属性props

我们在用脚手架创建完项目之后，会发现里面的传值用的就是这种方式。

子组件HelloWorld中：

// 利用插值表达式显示msg变量
<h1>{{ msg }}</h1>

// props属性，定义位置与data平级
props: {
	msg: String
},

父组件中：

// 使用子组件并给子组件的msg变量赋值
<HelloWorld msg="Welcome to Your Vue.js App"/>

// 引入子组件
import HelloWorld from './components/HelloWorld.vue'

// 注册子组件
components: {
	HelloWorld
}

②引用refs传值

子组件HelloWorld中：

<h1>{{ msg }}</h1>

// 注意：此时的msg变量定义到了data中
data(){
	return{
		msg: ''
	}
}

父组件中：

<HelloWorld ref="communicate"></HelloWorld>

import HelloWorld from './components/HelloWorld.vue'

components: {
	HelloWorld
},
mounted(){
	// 通过refs给子组件传值
    this.$refs.communicate.msg = "我是父组件通过$refs传递过来的参数"
}

2.子组件→父组件

子组件向父组件传值通过的是自定义事件的方式。

子组件中：

this.$emit('add','123')

父组件中：

// 使用自定义事件add 绑定方法cartAdd
<hello-world @add="cartAdd($event)"></hello-world>

import HelloWorld from './components/HelloWorld.vue'

components: {
	HelloWorld
}

// 定义方法 打印出的a就是子组件传过来的123
cartAdd(a){
	console.log(a);  
}

3.兄弟组件

兄弟组件通过共同祖辈组件$parent或$root，$parent会找到其父组件，$root会找到最根的祖辈组件。

组件1中：

this.$root.$emit('foo')

组件2中：

this.$root.$on('foo', ()=>console.log(this.bro))  // 在data里定义了bro

在父组件中引入组件1和组件2，组件1会触发组件2中的foo方法。

4.祖先和后代之间

①provide/inject：能够实现祖先给后代传值。provide/inject都与data平级

祖先组件：

provide(){
	return {foo: 'foo123'}
},

后代组件：

inject: ['foo']

console.log(this.foo);

后代组件中可以打印出祖先组件传过来的foo123。

②dispatch：后代给祖先传值

祖先组件：

this.$on('hello', (data) => {
  console.log(data);
});

后代组件：

<h1 @click="dispatch('hello', 'hello,world')">{{ msg }}</h1>

// 定义一个dispatch方法，指定要派发事件名称和数据
dispatch(eventName, data) {
	let parent = this.$parent;
	//只要还存在父元素就继续往上查找
	while (parent) {
		if (parent) {
			//父元素用$emit触发
			parent.$emit(eventName, data);
			//递归查找父元素
			parent = parent.$parent;
		}else{
			break
		}
	}
}