VUE-零散记录点之父子组件相互访问

• 先说说根组件和父组件的区别:$root指代根组件，$parent指代父组件，根组件是指整个vue实例的根，父组件指当前元素上一级组件。
• 先谈父组件如何访问子组件。

    当前父组件中引入子组件比如说<banner ref="banner" ></banner>
    
    第一种:通过$refs访问
    当前组件中 this.$refs.banner.属性 可以访问到子组建属性
    同理this.$refs.banner.fn 可以访问到子组件方法

    第二种:通过$children访问
    this.$children[0].属性  可以访问到子组件，缺点就是必须按顺序填写子组件序列

    第三种:通过prop访问  
    在引用子组件处（父组件）定义 
    <banner ref="banner" :title="title"></banner>
    在子组件内部,申明接受
    props:{
        title:{
            default:'',
            type:String
        }
    }
   子组件中即可使用 this.title
    
   第四种:写法上类似第一种  通过this.$refs.banner.$emit('方法名')，发射一个方法名字
    子组件中通过
    this.$nextTick(()=>{
            // 子组件接受父组件的事件
            this.$on('方法名',function(){
                console.log('我是子组件方法')
            })
        })
    类似一个发射、一个负责接收
    
   第五种:父组件可以通过依赖注入的方式
    父组件中：定义一个需要执行的事件
    provide(){
        return{
            getFatherData:this.getFatherData
        }
    },
    子组件中
    inject:['getFatherData']
    就可以直接使用这个getFatherData方法了

• 再谈谈子组件怎么访问父组件

第一种可以使用$parent
在子组件中使用this.$parent.属性 即可访问到 

第二种就是子组件可以通过$emit()然后父组件同理接受这个事件。
相类似的还有第一次笔记中提到的一个语法糖.sync，显示的调用并更新数据

第三种是网上说的 可以通过父组件把方法传给子组件，类似props，然后子组件接受了直接调用