vue最全组件传值

1. 父传子

父组件是通过props属性给子组件通信的
父组件代码如下：

子组件代码如下：

2. 子传父

通过绑定事件然后用$emit传值
父组件代码如下：

子组件代码如下：

3. 兄弟传兄弟

通过bus总线传递
main.js代码如下：

window.$bus=new Vue();

第一个页面：

第二个页面：

4.$ref

被用来给元素或子组件注册引用信息
父组件代码如下：

子组件代码如下：

5.vuex

通过store.commit将值传入vuex中，vuex通过mutations来接收
在store/index.js中写入以下代码：

 state: {
    userName:''
  },
  mutations: {
    user(state,name){
      state.userName=name;
    },
    }

在组件内写入以下代码：
通过store.commit（‘方法名’，‘参数’）

      this.$store.commit("user", {
        userName: res.user.userName,
        id: res.user.user_id,
      });

6.路由传参

//在methods中写入方法
      getDescribe(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })
        //在路由中传入参数
       {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

7. 全局变量

在src中首先创建一个Global.js文件，文件中定义变量

//全局变量创建最好是对象
exports.install = function (Vue) {
    Vue.prototype.$allArray = {};
};

在src中的main.js文件中引入

//导入并使用全局方法和变量
import Global from './Global';
Vue.use(Global);

组件中使用的时候

//给全局变量赋值你想要的数据
this.$allArray.arr= this.categoryArr;

//在其他任意组件内可以直接使用
 console.log(this.$allArray.arr);

8.promise

promise是处理异步的利器

//类似与这样使用，但实际上后面两个参数无法获取
promise = new Promise((resolve,reject)=>{
    let a = 1
    let b = 2
    let c = 3
    resolve(a,b,c) 
})
promise.then((a,b,c)=>{
    console.log(a,b,c)
})

9.sessionStorage传值

sessionStorage 是浏览器的全局对象，存在它里面的数据会在页面关闭时清除 。运用这个特性，我们可以在所有页面共享一份数据。

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();