首页
所有分类
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中使用mockjs代码实例
Nov 25 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 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搭建脚手架
FuzzyWuzzy(1) 人工智能(2) PyTorch(1) Pyecharts(7) 图像处理(1) 模糊匹配(1) 五子棋(12) 模型保存加载(1) 井字棋(1) 计算器(5)
You might like
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
一个可复用的vue分页组件
2017/05/15 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
python操作CouchDB的方法
2014/10/08 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
python如何实现代码检查
2019/06/28 Python
django ajax发送post请求的两种方法
2020/01/05 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
详解Python IO编程
2020/07/24 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
摩顿布朗英国官方网上商店：奢华沐浴、身体和头发护理
2016/10/29 全球购物
Perfume’s Club意大利官网：欧洲美妆电商
2019/05/03 全球购物
SmartBuyGlasses德国：购买太阳镜和眼镜
2019/08/20 全球购物
如何利用find命令查找文件
2016/11/18 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
运动会通讯稿50字
2015/07/20 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python