组件间传值

1.父子组件传值

父组件通过props向子组件传递数据，子组件通过$emit时间和父组件通信

2. 父子组件传值，祖孙组件传值

provide+inject
provide：用于发送数据
inject：用来接受数据或方法

用法：

//父组件中定义
provide() {
    return {
      foo: this.foo
    };
  },
 //子孙组件接受
  inject: ["foo"],

3.父组件操作子组件 ref/$refs

<div ref="refName" class="usageChart"></div>

let element = this.$refs.refName
或
let element = this.$refs["refName"]
//操作子组件属性
this.$refs.twoChildrenRef.name
//获取子组件方法
this.$refs.twoChildrenRef.func（）

4.跨标签页的传值

1.实现方式：BroadcastChannel

1.自定义js文件，两个标签页均应用该js，保证标签页的名字都一样
2.实现message.js

const channel = new BroadcastChannel("name")

sendmsg(type,msg){
channel.postMessage({type,content})
}

listenmsg(callback){
channel.addEventListener('message',e=>{
e.data && callback（e.data）
})
}

2.localStorage的onstorage

当存储的数据变化时调用
window.onstorage = function () { }