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
}
}
}
祖先组件中可以打印出后代组件传过来的hello,world
。
5.任意组件之间
任意组件之间的通信方式可以通过事件总线bus或者Vuex,因为之前分享过,这里不再赘述。
直通门:
深入理解Vuex
Vue中bus传值的理解
总结
以上是对Vue组件传值方式的整理,不知道大家可以掌握多少呢?