vue 父子组件传值

https://blog.csdn.net/lander_xiong/article/details/79018737  
组件直接传值
   <el-form-item>                        
                  <el-button @click="modalTableVisible = false" style="margin-right:6px;margin-left:    81px; margin-top: 10px;">取 消</el-button>
                  <el-button type="primary" @click="submit" >提交</el-button></el-form-item>
    </el-form> 
  <component :is="currentView" ref="currentValue"></component>
   data(){
    return{
     currentView: "assets",  // 当前组件
  }
}    
   submit(){
     this.$refs.currentValue.findAccsubj();   //  调用子组件的方法； 
  }
  

2018/7/24

子组件：
 需要子组件向父组件传值：  需要子组件来一个事件驱动
   <div     @click="transfrom">
            <img src="./../../../../static/img/bookkeepingMain/oa_xzpz.png"  alt="新增凭证" title="新    增凭证">
             <p style="color:#ff956e;font-size:19px;margin-left:-20px;">+<a >新增凭证</a></p>
          </div>
   transfrom(){
        this.$emit("child",'新增凭证');
      },

父组件：
   <component :is="currentView" :data="data" v-on:child="receive"></component>  还是子组件自己本身绑定事件来响应子组件；    简写：<component  @child="receive">

**特别强调：**    这里一定加上  v-on:自组件绑定的事件  要不然接受不到子组件的值;
-----

   receive(data){
        if(data=="新增凭证"){
          this.handleSelect("addVoucher");
        }
      },

 ele-ui:
 NavMenu 导航菜单     http://element-cn.eleme.io/1.4/#/zh-CN/component/menu;
 还是接着上面的 继续；组件切换了；但是上面的导航栏没有随着子组件的变化而变化；
 解决方法：
   <el-menu :default-active="defaultActive" class="el-menu-demo" mode="horizontal"  ref="menu">
          <el-menu-item index="bookkeepingMain">首页</el-menu-item>
           <el-submenu index="1">
            <template slot="title">凭证</template>
            <el-menu-item index="addVoucher">新增凭证</el-menu-item>
            <el-menu-item index="voucherList">查看凭证</el-menu-item>
            <el-menu-item index="voucherSum">凭证汇总表</el-menu-item>
          </el-submenu>
   </el-menu>       
   data:{
     return{
      defaultActive:"bookkeepingMain";     //  默认为主页； 
    }
   }
   receive(data){
        if(data=="新增凭证"){
          this.handleSelect("addVoucher");
          this.defaultActive = addVoucher;     // 当前样式就为传过来的组件所在的区域;
          }
   }, 


2018/7/25  子组件要修改父组件的值或者调父组件的方法;
父组件：
<template>
  <div id="app">
    <three/>
  </div>
</template>
<script>
import three from './components/three'
export default {
  components:{
    three,
  },
  data(){
    return {
      a:'我是父组件'
    }
  },
  methods:{
  aa(){
   alert(1212);
   }
}
}
</script>
子组件：
<template>
    <div class="three">
        <hr>
        <h2>我是子组件</h2>
        <button @click="change">传递事件</button>
    </div>
</template>

<script>

export default {
  data() {
    return {};
  },
  methods: {
    change() {
        this.$parent.a = '6666';
        this.$parent.aa();   // alert(1212);  ok了 
    }
  }
};
</script>

 this.$parent.变量(函数名()) = '6666'

2018.12.17 增加的内容；
如果父传子，内容较少；就直接props；
要是多的内容的话，就直接用slot卡槽去；

father.vue   父组件：
<template>
    <div id="father">
        <h3>我是父亲</h3>
        <child  :fatherSay="msg" @child="getData">
            <p  class="red"  slot="a">每天晚上七点之前必须回来吃饭。</p>
            <p  class="red"  slot="b">出去玩之前要征得老爸同意</p>
            <p  class="red"  slot="c">不能离家太远，在附近玩</p>
        </child>
    </div>  
</template>

<script>
import child from './child'
export default{
    name: 'father',
    components: {
        child
    },
    data(){
        return{
            msg: '快点回来，吃饭了',
        }
    },
    methods: {
        getData(data){
            console.log(data);
        }

    },
    created(){

    }
}

</script>

<style>
.red{
    color: red;
}
</style>

child.vue

<template>
    <div id="child">
        <h3>我是子组件</h3>
        {{fatherSay}}
        <button @click="emit">我是子组件</button><br>
        第一：
        <slot  name="a"></slot>第2条：
        <slot  name="b"></slot>第3条：
        <slot  name="c"></slot> 
    </div>
</template>

<script>
export default{
    name: 'child',
    data(){
        return{  }
    },
    props: ['fatherSay'],
    methods: {
        emit(){
            this.$emit('child','我是子组件，传给父组件');
        }

    },
    created(){

    }
}
</script>

<style>
</style>