一、vue组件通讯
- 父子通讯
**** 父->子:主要通过props实现
props:支持数组和对象两种接收形式
单向数据流:
只能父->子级->子级的子级,而不能子级改变父级
注意:如果要接收的props值进行修改,则通常把props接收的值处理成data变量或computed计算属性
难道子级真的不难改变父级了吗??
1.利用对象特性--浅复制
2.利用vue中的sync和$emit实现
父组件中:
<a-com :msg.sync="msg"></a-com>
子组件中:
this.$emit('update:msg','全栈1909A')
***子->父:主要通过$emit实现
this.$emit('向父级派发的事件名',要传递的值)
面试官:
如何在父组件中调用子组件的方法
1.通过ref给子组件命名,再调用
this.$refs.a.clickMe()
2.通过$children
this.$children[0].clickMe()
如何在子组件中调用父组队的方法
this.$parent
- 隔代通讯
***provide:提供服务
1.通过对象提供
export default {
name: "app",
provide:{ money:1000000 },
data() {
return {}
}
2.通过函数提供
export default {
name: "app",
provide(){
return {
app:this
}
},
data() {
return {}
}
***inject:消费服务
export default {
name: "bcom",
inject: ["app"]
}
*** $attrs和$listeners
$attrs将祖仙元素的数据,传递给后代元素
$listeners:通过后代派发事件,中间组件通过$listeners传递,在祖仙元素监听触发
vuex:
- 兄弟通讯
bus方法
vuex
通过公共父级组件当桥梁传递
二、递归组件
5!=5*4*3*2*1
5*4
4*3
3*2
2*1
斐波那契数列
1,1,2,3,5,8,13,.....
递归:即函数自身调用函数自身
递归使用条件:
1.可以把复杂的问题用简单的步骤来描述 f(n-1)+f(n-2)
2.有一个结束递归的条件 if(n===1) return 1;
JSON数据树形结构:
let jsonObj={
books:[
{id:1001,name:'一级菜单01',children:[
{id:100001,pid:1001,name:'二级菜单01'},
{id:100002,pid:1001,name:'二级菜单02'},
{id:100003,pid:1001,name:'二级菜单03'},]},
{id:1002,name:'一级菜单02',children:[]},
{id:1003,name:'一级菜单03':children:[]}
]
}
v-model本质上是什么,或谁的语法糖
v-model本质上是用value属性,input事件实现的
实现原理:Object.defineProperty()