组件化
组件化是vue的核心思想，主要是为了代码重用。
image.png
组件通信
父组件=>子组件
- 属性props
//child
props:{ msg: String }
//parent
<HelloWorld msg="Welcome to Your Vue.js App />
- 引用refs
//parent
<HelloWorld ref="hw" />
//获取子组件或者子节点
this.$refs.hw.xx
子组件=>父组件：自定义事件
//child
this.$emit('add',good)
//parent
<Cart @add="cartAdd($event)"></Cart>
兄弟组件：通过共同的祖辈组件
通过共同的祖辈组件搭桥，root。
//brother1
this.$parent.$on('foo',handle)
//brother2
this.$parent.$emit('foo')
祖先和后代之间
由于嵌套层数过多，传递props不切实际，vue提供了provide/inject的API完成任务
- provide/inject:能够实现祖先给后代传值
//ancestor
provide(){
return { foo:'foo' }
}
//descendant
inject:['foo']
注意：provide和inject主要为高阶插件/组件库提供用例，并不推荐直接用于应用性代码中。我们更多会在开源组件库中看到。
另外，反过来想要后代给祖代传递值这种方案就不行了，需要用下面方案
- dispatch：后代给祖先传值
//定义一个dispatch方法，指定要派发的事件名和数据
//在dispatch方法中也可以指定一个父元素来派发事件，否则终止
function dispatch(eventName,data){
let parent = this.$patent
//只要存在父元素就继续向上查找
while(parent){
if(parent){
//父元素用$emit触发
parent.$emit(eventName,data)
//递归查找父元素
parent = parent.$parent
}else{
break
}
}
}
//使用HelloWorld.vue
<h1 @click="dispatch('hello','hello world')">{{ msg }}</h1>
//App.vue
this.$on('hello',this.sayHello)
任意两个组件之间：事件总线或者vuex
- 事件总线：创建一个Bus类负责事件派发、监听和回调管理
//Bus:事件派发、监听和回调管理，维护了一个回调函数组成的对象
class Bus{
constructor(){
{
eventName1:[fn1,fn2],
eventName2:[fn3,fn4]
}
this.callback = { }
}
$on(name,fn){
this.callbacks[name] = this.callbacks[name] || [ ]
this.callbacks[name].push(fn)
}
$emit(name,fn){
if(this.callbacks[name]){
this.callbacks[name].forEach(cb => cb(args))
}
}
}
//main.js
Vue.prototype.$bus = new Bus()
//child1
this.$bus.$on('foo',handle)
//child2
this.$bus.$emit('foo')
实践中可以用Vue代替Bus，因为它已经实现了相应的功能
- vuex：创建唯一的全局数据管理store，通过它管理数据并通知组件状态变更
插槽
插槽语法是vue实现的内容分发API，用于复合组件开发。该技术在通用组件开发中有大量应用。
Vue2.6.0之后采用全新v-slot语法代替之前的slot、slot-scope
匿名插槽
//comp1
<div>
<slot></slot>
</div>
//parent
<comp1>hello </comp1>
具名插槽
将内容分发到子组件指定的位置
//comp2
<div>
<slot></slot>
<slot name="content"></slot>
</div>
//parent，这里面用到的变量的作用域就是当前组件的作用域，会渲染完成之后再放到子组件的slot里面
<Comp2>
<!-- 默认插槽用default做参数 -->
<template v-slot:default>具名插槽</template>
<!-- 具名插槽用插槽名做参数-->
<template v-slot:content>内容....</template>
</Comp2>
作用域插槽
分发的内容要用到子组件中的数据,子组件将数据传给slot，分发的内容会变成一个函数在子组件里面执行，然后渲染到slot的位置
//comp3
<div>
<slot :foo="foo"></slot>
</div>
//parent
<Comp3>
<!-- 把v-slot的值指定为作用域上下文对象 -->
<template v-slot:default="ctx">
来自子组件的数据 {{ctx.foo}}
</template>
</Comp3>
递归组件
递归组件是可以在他们自己的模板中调用自身的组件。
//Node
<template>
<div>
<h3>{{data.title}}</h3>
<!-- 必须有循环结束条件 -->
<template v-if="data.children">
<Node v-for= "d in data.children" :key="d.id" :data="d"></Node>
</template>
</div>
</template>
<script>
export default {
name:'Node', //name对递归组件是必需的
props:{
data:{
type:Object,
require:true
},
},
}
</script>
//使用
<Node :data="{id:'1',title:'递归组件',children:[{...}, {...}, ...]}"></Node>
以上是vue组件化思想涵盖的一些知识点，个人总结了一下，不胜完善，共同学习
网友评论