Javascript

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系列---【父子组件传值】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!