vue 组件与全局数据传递共享方式

  一，父子组件间数据传递
　　实际工作中会遇到一些复用程度高的功能，自己会封装小组件全局调用，在组件中通过自定义props里的值，例如：

       

　　在需要调用的组件中先import 组件进来，自定义标签引入，在标签上传入props接受的参数：

       

　　

二、父组件调用子组件属性与方法 - $ref 、$parent

this.$refs.hw.xx = 'xxx'

this.$children[0].xx = 'xxx'

 

三、通过 $attar 、$listener

 

$attrs

 

把父组件中非props属性绑定到内部组件

 

$listeners

 

把父组件中的DOM对象的原生事件绑定到内部组件

 

 

四、v-model

五、插槽

 

// ComA
<div>
    <slot></slot>
    <slot name="content"></slot>
</div>

// 使用
<com-a>
    <template v-slot:default>具名插槽</template>
    <template v-slot:content>自定义插槽</template>
</com-a>

 

　　

 

六、project / inject：能够实现祖先给后代传值

 

// ancestor
provide() {
  return { foo: 'foo'}      
}

// descendant
inject: ['foo']

 

　　

 

 七、事件总线：创建一个Bus类负责事件派发、监听和回调管理

 

// Bus：事件派发、监听和回调管理
class Bus{
    
    constructor(){
        this.callbacks = {}
    }
    $on(name, fn){
        this.callbacks[name] = this.callbacks[name] || []
        this.callbacks[name].push(fn)
    }
    $emit(name, args){
       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')   

 

　　

 

七、文件可读可写

　　使用场景中经常出现，多个组件需要相同的接口返回数据进行处理，纯粹按请求很频繁会影响性能跟体验感，然后从上个方法在深入探索了下，

将这些数据放在全局“变量”里，可读可写：

        

　　 在入口文件main.js里注入，即可在所有组件读写变量

 　　　　

        

　　似乎是可以了，但在这有问题全局变量初始值为空，刷新时，各模块同时加载，父级组件接口未执行完成取得数据写入文件，子组件程序就已经执行完成，所以是取不到数据的，

　　一开始想的是promise思路，终究就是个加载顺序问题，通过路由加载可处理。

 

 八、vuex:创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更