其他分享
首页 > 其他分享> > 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;
    }
  }

 

标签:asideMenuEvent,Vue,---,setItem,vue,组件,null,menuList,传值
来源: https://www.cnblogs.com/hujunwei/p/16163546.html