vue中的组件通信 及 递归组件

一、vue组件通讯

1. 父子通讯

**** 父->子：主要通过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

2. 隔代通讯

***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:

 

3. 兄弟通讯

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()