vue react组件之间互相通讯

vue组件之间互相通讯，vuex太大，可以取巧的方法如下：

Vue组件简单常用的通信方式有以下几种：

1、父子通信：
父子组件通讯：
父组件：

子组件：
props: {
myvisible: {
type: Boolean,
default: false,
},
},

btnClose(){
this.KaTeX parse error: Expected 'EOF', got '}' at position 33: …sible', false) }̲ 父向子传值，通过props；…emit)；父调用子方法通过ref；provide / inject。

2、兄弟通信：bus

3、跨级嵌套通信：bus；provide / inject等。

---

一、vue.observable
observable
首先创建一个 store.js，包含一个 store和一个 mutations，分别用来指向数据和处理方法。
然后在其他组件中使用：
import {store,mutations} from ‘@/store’
methods:{
setCount:mutations.setCount,
changeName:mutations.changeName
}

二. local storage读取
var storage=window.localStorage;
storage.a=123
storage.setItem("c",222)
storage.removeItem("c")
storage.clear();
sessionStorage 
　　sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

　　用法： 
　　　　储存： 1. 点（.）运算符                          sessionStorage.lastname = 'JSAnntQ';   

　　　　　　　 2. 方括号（[ ]）运算符                 sessionStorage['lastname'] = 'JSAnntQ';

　　　　　　　 3. localStorage.setItem　　　　  sessionStorage.setItem("lastname", "JSAnntQ");　

　　　　

　　　　

　　　　储存： 1. 点（.）运算符                          sessionStorage.lastname  

　　　　　　　 2. 方括号（[ ]）运算符                 sessionStorage['lastname'] 

　　　　　　　 3. localStorage.getItem                sessionStorage.getItem("lastname");　

三、cookies的读写

/**
 * Cookies设置
 */
function setCookies(name, value) {
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}

/**
 * Cookies提取
 */
function getCookies(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}

cookie注意点：
js在存入cookie时,利用escape() 函数可对字符串进行编码,用unescape进行解码

expires属性
指定了coolie的生存期，默认情况下coolie是暂时存在的，他们存储的值只在浏览器会话期间存在，当用户推出浏览器后这些值也会丢失，如果想让cookie存在一段时间，就要为expires属性设置为未来的一个过期日期。现在已经被max-age属性所取代，max-age用秒来设置cookie的生存期。

path属性
它指定与cookie关联在一起的网页。在默认的情况下cookie会与创建它的网页，该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联。

domain属性
domain属性可以使多个web服务器共享cookie。domain属性的默认值是创建cookie的网页所在服务器的主机名。不能将一个cookie的域设置成服务器所在的域之外的域。
例如让位于order.example.com的服务器能够读取catalog.example.com设置的cookie值。如果catalog.example.com的页面创建的cookie把自己的path属性设置为“/”，把domain属性设置成“.example.com”，那么所有位于catalog.example.com的网页和所有位于orlders.example.com的网页，以及位于example.com域的其他服务器上的网页都可以访问这个coolie。

secure属性
它是一个布尔值，指定在网络上如何传输cookie，默认是不安全的，通过一个普通的http连接传输				

三.路由的读写
把参数放在路由中，当然参数字段不能太长。
写入参数：
this.$route.push(path{:}^{\prime }/hom{e}^{\prime },name{:}^{\prime }hom{e}^{\prime },query:id:1334,name{:}^{\prime }ab{c}^{\prime })读取参数：然后获取：this.$route.query.id,this.$route.query.name

四、PubSub第三方插件
npm i pubsub-js -S
对应的组件文件导入:
import PubSub from ‘pubsub-js’

// 子组件发布消息
    /* Todo.vue */
    methods : {
        delete_data(){ // 子组件私有函数
            if(window.confirm(`确认要删除吗`)){
            /* 发布消息 */
            PubSub.publish("delete_data", comment) // 参数一：消息名；参数二：需要传递的参数数据
        }
    }

    // 爷组件订阅消息,$attr和$listener
    /* App.vue */
    mounted() { //挂载后就订阅
        /* 订阅消息 */
        PubSub.subscribe('delete_data' , (msg , comment)=>{    // 参数一msg：暂时无关紧要，但是必须写；参数二：对应传递的数据
        this.delete_data(comment)    // 调用此组件里的函数
        // this.comments_data = this.comments_data.filter(item => item!=comment)
    })
    }

/**
*孙组件如果调用了含有发布消息的函数，订阅消息里的操作便会被触发，同时也会伴随组件数据以函数参数进行传递
*
**/

五、$root、$refs、$parent、$attrs 、$listener1、$root 可以用来获取vue的根实例，比如在简单的项目中将公共数据放再vue根实例上(可以理解为一个全局 store ),因此可以代替vuex实现状态管理；

2、$parent 属性可以用来从一个子组件访问父组件的实例，可以替代将数据以 prop 的方式传入子组件的方式；当变更父级组件的数据的时候，容易造成调试和理解难度增加；

3、在子组件上使用ref特性后，this.$refs属性可以直接访问该子组件。可以代替事件$emit 和$on的作用。使用方式是通过ref特性为这个子组件赋予一个ID引用，再通过this.$refs.testId获取指定元素。注意：$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

六、props(.sync同步) emit slot

react组件之间互相通讯
props
context
redux
https://blog.csdn.net/xingfuzhijianxia/article/details/86151243

七、爷孙组件传值
provide和inject
根组件定义：

appVue父组件

​ 子组件接收：

组件10

接受到根组件的传递的数据{{userName}}