VUE实例：组件间的传值，props，refs

通过props来修改、获取子组件的值

A页面

 <a-menu
              :default-selected-keys="[selectedKeys]"
              :default-open-keys="['sub1','sub2','sub3']"
              mode="inline"
              :inline-collapsed="collapsed"
              @click="ChooseMenu"
          >
            <a-sub-menu key="sub1">
              <span slot="title">
                <span style="margin-left: 25px;">大标题1</span>
              </span>
              <a-menu-item key="1">
                小标题1
              </a-menu-item>
              <a-menu-item key="2">
                小标题2
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title">
                <span style="margin-left: 25px;">大标题2</span>
              </span>
              <a-menu-item key="3">
                小标题3
              </a-menu-item>
            </a-sub-menu>
          </a-menu>

//接收B页面传来的selectedKey的值
props:['selectedKey'],
data() {
  return {
     selectedKeys:"1",
  }
},
created() {
    //this.selectedKey就是B页面传来的selectedKey的值
   this.selectedKeys= this.selectedKey
},
methods:{
ChooseMenu(item){
        console.log(item.key) //当前选中页面的key值，可以通过这个来切换页面
      },
}

B页面

<template>
  <div>
      <!-- 这里的:selectedKey="'4'"就可以直接传值到A页面，改变selectedKey的值-->
    <Menu :selectedKey="'4'"></Menu>
  </div>
</template>

import Menu from "../../views/index"
export default {
  components:{
    Header,Menu
  },
}

通过$refs来修改、获取子组件的值

A页面

  data() {
    return {
      iconcolor:'#ffffff',
    }
  },

B页面

<Header ref="childrenDom"/>

import Header from "../../components/Header";
export default{
    components:{
    	Header,
  	},
    created() {
        this.$refs.childrenDom.iconcolor = '#1890FF' 
        //这里就修改了A页面的值，不知道created函数的，可以去看看VUE的生命周期
        //this.$refs.childrenDom.iconcolor在其他函数里面也可以用
  	},
}