vue-router父子组件传值及方法调用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

父子组件之间的传值和方法调用经常用到，导航栏的全局搜索就可以通过这个实现。简单写个demo练习一下。

一、实现代码

father.vue代码：

<template>
  <div class="father">
    <button v-on:click="runSonMd">调用子组件方法</button>
    <!--@faMethod="faMethod"暴露父组件方法;:faMsg="faMsg"暴露父组件的值;ref="sonMethod"绑定子组件-->
    <router-view @faMethod="faMethod" :faMsg="faMsg" ref="sonMethod"></router-view>
  </div>
</template>
<script>
export default {
  name: "Father",
  data(){
    return {
      faMsg: '我是父组件信息',
      sonMsg: ''
    }
  },
  methods:{
    //父组件方法
    faMethod(val){
      //调用子组件值
      this.sonMsg = val;
      alert('我是父组件方法,子组件的信息是：'+this.sonMsg);
    },
    runSonMd(){
      //调用子组件的方法
      this.$refs.sonMethod.sonMethod();
    }
  }
}
</script>

son.vue代码：

<template>
  <div id="son">
    <button v-on:click="runFaMd">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  name: "Son",
  //父组件参数列表
  props: ['faMsg'],
  //监听父组件值
  watch: {
    faMsg: function (val) {
      // 接收父组件的值
      this.faMsgs = val;
    }
  },
  data() {
    return{
      sonMsg: '我是子组件信息',
      faMsgs: ''
    }
  },methods:{
  	//子组件方法
    sonMethod(){
      alert('我是子组件方法,父组件信息是：'+this.faMsg);
    },
    runFaMd(){
    //调用父组件方法
      this.$emit('faMethod',this.sonMsg);
    }
  }
}
</script>

总结

父子组件传值和调用方法，融合到一块写了，第一次看比较绕，多看几次就能理解了，代码里面也做了详细的注释。需要注意的点有：
1、代码的逻辑：父组件调用子组件的方法，输出子组件接收父组件的值；子组件调用父组件的方法，输出父组件接受子组件的值。
2、子组件向父组件传值，其实是，子组件调用父组件的方法给父组件接受参数的变量赋值的操作。
3、我觉得这种子组件调用父组件的方式最简洁，另外还有其它两种方式。