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;
    }
  }

 3.直接绑定到子组件，子组件用props接收的方案

//父组件
<template>
    <child :showDialog='showDialog' :updateParam='updateParam' :optionType='optionType'></child>
</template>
export default {
  components: {
    outcomeEditor
  },
  data() {
    return {
      optionType: 0,
      showDialog: false,
      tableData: [],
      updateParam: {}
    }
}

子组件用props接收即可，子组件data中不必再定义，直接当子组件变量使用即可

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    optionType: {
      type: Number,
      default: 0
    },
    updateParam: {
      type: Object,
      default: function() {
        return {}
      }
    }
  }
}