首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript Vue.js

深入讲解Vue中父子组件通信与事件触发

Posted in Vue.js onMarch 22, 2022

一、组件

子组件

<template>
  <div style="border:1px solid black;width:400px; height: 130px;">
    <h3>我是子组件</h3>
    <button>子组件将值传递给父组件</button>
    <div>子组件接收父组件的值:</div>
  </div>
</template>

父组件

<template>
 <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
    <h3>我是父组件</h3>
    <div>子组件向父组件传递的值:</div>
    <Child></Child>
  </div>
</template>

<script>
import Child from './Child';
export default {
    components: {
        Child
    }
}
</script>

效果展示：

深入讲解Vue中父子组件通信与事件触发

通过这张图可以看出父子组件的结构，下面我们来实习父子组件通信。

二、父子组件通信

父组件给子组件通信

实现思路：子组件通过 props 来接受父组件传过来的值。

  • 在父组件中，定义一个data变量，在子组件标签中动态绑定这个值。

    // Father.vue
<template>
 <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
    <h3>我是父组件</h3>
    <div>子组件向父组件传递的值:{{ChildMsg}}</div>
    <Child :FatherMsg="data"></Child>
  </div>
</template>

<script>
import Child from './Child';
export default {
    data() {
        return {
            data: 'I am your father',
        }
    },
    components: {
        Child
    }
}
</script>

  • 接着在子组件里通过 props 来接收，这样子组件就接收到了父组件传递过来的值了。

    // Child.vue
<template>
  <div style="border:1px solid black;width:400px; height: 130px;">
    <h3>我是子组件</h3>
    <button>子组件将值传递给父组件</button>
    <div>父组件向子组件传递的值:{{FatherMsg}}</div>
  </div>
</template> 

<script>
export default {
    data() {
        return {
            data: 'I am your children',
        }
    },
    props: ['FatherMsg']
}
</script>

深入讲解Vue中父子组件通信与事件触发

可以看到，我们父组件向子组件通信已经实现了，接下来就是子组件向父组件通信了，这个就要使用到 this.$emit 方法了。

子组件向父组件通信

实现思路：通过在子组件中使用 this.$emit 来触发自定义事件并传值，然后在父组件中监听该事件即可。

  • 在子组件中给 button 按钮添加 click 事件，来通过 this.$emit 自定义事件，并传入一个参数：

    <template>
  <div style="border:1px solid black;width:400px; height: 130px;">
    <h3>我是子组件</h3>
    <button @click="send">子组件将值传递给父组件</button>
    <div>父组件向子组件传递的值:{{FatherMsg}}</div>
  </div>
</template> 

<script>
export default {
    data() {
        return {
            data: 'I am your children',
        }
    },
    props: ['FatherMsg'],
    methods: {
      send() {
        this.$emit('ListenChild', this.data);
      }
    }
}
</script>

  • 在父组件中的子组件标签里，先在 data 里定义一个变量接收这个值，然后监听在子组件中自定义的事件，并接受这个参数赋值给定义的变量：

    <template>
 <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
    <h3>我是父组件</h3>
    <div>子组件向父组件传递的值:{{ChildMsg}}</div>
    <Child :FatherMsg="data" @ListenChild="ListenChild"></Child>
  </div>
</template>

<script>
import Child from './Child';
export default {
    data() {
        return {
            data: 'I am your father',
            ChildMsg: '',
        }
    },
    components: {
        Child
    },
    methods: {
        ListenChild(data) {
            console.log("子组件传递过来的值：" , data);
            this.ChildMsg = data;
        }
    }
}
</script>

点击子组件中的“子组件将值传递给父组件”，就可看到如下效果：

深入讲解Vue中父子组件通信与事件触发

三、父子组件事件触发

父组件调用子组件中的事件方法

  • 通过 ref 直接调用子组件的方法：

    // Child.vue 
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子组件
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            msg: '',
        }
    },
  methods: {
    childFun() {
      console.log('我是子组件的方法 childFun');
      this.msg = '我的方法被调用了'
    },
  },
};
</script>

    在子组件标签上添加 ref 属性，然后在方法中通过 this.$refs 找到绑定 ref 的属性调用该子组件内的方法即可。

    // Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">
    我是父组件
    <Button @click="handleClick">点击调用子组件方法</Button>
    <Child ref="child" />
  </div>
</template>    

<script>
import Child from './Child';

export default {
    components: {
        Child
    },
    methods: {
        handleClick() {
            this.$refs.child.childFun();
        },
    },
}
</script>

  • 通过组件的 $emit、$on 方法：

    // Child.vue 
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子组件
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            msg: '',
        }
    },
  mounted() {
    this.$on('childFun', function() {
        console.log('我是子组件方法');
        this.msg = '我的方法被调用了'
    });
  }
};
</script>

    在子组件中使用 $on 绑定一个方法，然后在父组件中通过 $emit 找到绑定 $on 上面的事件名即可，但是也需要 ref 的配合。

    // Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">
    我是父组件
    <Button @click="handleClick">点击调用子组件方法</Button>
    <Child ref="child" />
  </div>
</template>    

<script>
import Child from './Child';

export default {
    components: {
        Child
    },
    methods: {
        handleClick() {
        	//子组件$on中的名字
            this.$refs.child.$emit("childFun")    
        },
    },
}
</script>

两种实现方式效果一致。

调用方法前：

深入讲解Vue中父子组件通信与事件触发

调用方法后：

深入讲解Vue中父子组件通信与事件触发

深入讲解Vue中父子组件通信与事件触发

子组件调用父组件中的事件方法

  • 直接在子组件中通过 this.$parent 来调用父组件的方法

    // Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
    我是父组件
    <Child></Child>
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
  import Child from './Child';
  export default {
      data() {
          return {
              msg: ''
          }
      },
    components: {
      Child
    },
    methods: {
      fatherMethod() {
        console.log('我的父组件中的方法');
        this.msg = '我的方法被子组件调用了';
      }
    }
  };
</script>
    // Child.vue
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子组件
    <button @click="childMethod">点击调用父组件方法</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

  • 在子组件里用 $emit 向父组件触发一个事件，父组件监听这个事件（推荐使用）

    // Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
    我是父组件
    <Child @fatherMethod="fatherMethod"></Child>
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
  import Child from './Child';
  export default {
      data() {
          return {
              msg: ''
          }
      },
    components: {
      Child
    },
    methods: {
      fatherMethod() {
        console.log('我的父组件中的方法');
        this.msg = '我的方法被子组件调用了';
      }
    }
  };
</script>

    子组件可以使用 $emit 触发父组件的自定义事件。

    // Child.vue
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子组件
    <button @click="childMethod">点击调用父组件方法</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        // fatherMethod父组件方法
        this.$emit('fatherMethod'); 
      }
    }
  };
</script>

  • 父组件把方法传入子组件中，在子组件里直接调用这个方法：

    // Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
    我是父组件
    <Child :fatherMethod="fatherMethod"></Child>
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
  import Child from './Child';
  export default {
      data() {
          return {
              msg: ''
          }
      },
    components: {
      Child
    },
    methods: {
      fatherMethod() {
        console.log('我的父组件中的方法');
        this.msg = '我的方法被子组件调用了';
      }
    }
  };
</script>

    父组件可以将事件绑定到子组件标签上，子组件使用 props 接收父组件的事件。

    // Child.vue
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子组件
    <button @click="childMethod">点击调用父组件方法</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

以上三种实现方式效果一致。

调用方法前：

深入讲解Vue中父子组件通信与事件触发

调用方法后：

深入讲解Vue中父子组件通信与事件触发

四、总结

至此，Vue 父子组件之间大部分的操作都涉及到了，我们在程序的开发过程中对于该部分内容可以游刃有余了。

到此这篇关于Vue中父子组件通信与事件触发的文章就介绍到这了,更多相关Vue父子组件通信与事件触发内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

深入讲解Vue中父子组件通信与事件触发

- Author -

小阿妍

- Original Sources -

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Vue.js 相关文章推荐
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue项目如何打包之项目打包优化（让打包的js文件变小）
Apr 30 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
关于Vue中的options选项
Mar 22 #Vue.js
vue+echarts实现多条折线图
vue使用echarts实现折线图
浅谈Vue的computed计算属性
VUE中的v-if与v-show区别介绍
Mar 13 #Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 #Vue.js
Vue2.0搭建脚手架
zip(1) 自动化(1) metaclass(1) enumerate(1) pytest(3) 进销存(1) list(1) csv(4) gevent(1) find(1)
You might like
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php中require和require_once的区别说明
2014/02/27 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
四个PHP非常实用的功能
2015/09/29 PHP
PHP代码维护，重构变困难的4种原因分析
2016/01/25 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
一个JavaScript变量声明的知识点
2013/10/28 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python脚本实现下载合并SAE日志
2015/02/10 Python
解决uWSGI的编码问题详解
2017/03/24 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python3中exp()函数用法分析
2019/02/19 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
详解Html5页面实现下载文件（apk、txt等）的三种方式
2018/10/22 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
资源环境与城市管理专业推荐信
2013/11/30 职场文书
珠宝店促销方案
2014/03/21 职场文书
写给老婆的保证书
2015/02/27 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
Go 内联优化让程序员爱不释手
2022/06/21 Golang