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>

vue-router父子组件传值及方法调用_第1张图片
vue-router父子组件传值及方法调用_第2张图片
vue-router父子组件传值及方法调用_第3张图片

总结

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

你可能感兴趣的:(vue.js,javascript,前端)