Vue系列---【父子组件传值】

本文主要是介绍Vue系列---【父子组件传值】，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.问题

　　开发中，vue项目一般在index.vue组件中包含aside.vue组件，以及Header.vue组件，一般在index.vue中请求接口，把数据传给aside和header组件。

2.Storage方案（localStorage和sessionStorage同理）

　　2.1在main.js中全局声明resetSetItem方法,代码如下：

Vue.prototype.resetSetItem = function (key, newVal) {
//根据自己需要修改
  var targetKey = ['headerMenu','asideMenu','activeAsidePath']
  if (targetKey.includes(key)) {

    // 创建一个StorageEvent事件
    var asideMenuEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: function (k, val) {
        sessionStorage.setItem(k, val);

        // 初始化创建的事件
        asideMenuEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);

        // 派发对象
        window.dispatchEvent(asideMenuEvent);
      }
    }
    return storage.setItem(key, newVal);
  }
}

　　2.2 在index.vue（父组件)中存储值

 methods: {
     getTreeList() {
       axios.get('/sysMenu/getTreeList').then(res => {
        let menuList = JSON.stringify(res.data.data);
        this.resetSetItem('headerMenu', menuList);
      })

    }
  }

　　2.3 在aside.vue（子组件）中取值

created() {
    window.addEventListener('setItem', () => {
    let menuList = sessionStorage.getItem('headerMenu');
    if (menuList != null){
      this.menu= menuList;
    }
  }

这篇关于Vue系列---【父子组件传值】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！