【Vue3 从入门到实战 进阶式掌握完整知识体系】014-探索组件的理念：父子组件如何通过事件进行通信

已于 2022-04-06 11:22:03 修改
阅读量210 收藏 1
点赞数
分类专栏： Vue.js 文章标签： vue
于 2021-06-29 22:05:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/118345045
版权

文章目录

5、父子组件如何通过事件进行通信

子组件调用的方法让父组件处理

子组件调用父组件的方法来改变父组件的数据。子组件无法改变父组件传过来的数据，可以通过此方法请求父组件来进行改变！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    methods:{
      // 在这里写一个 handleAddOne() 方法
      handleAddOne(){
        this.count ++;
      }
    },
    // 父组件监听子组件要调用的方法，指向一个方法
    // 注意这里的 addOne 最好写成 add-one
    template: `
        <div>
          <test :count="count" @add-one="handleAddOne()" />
        </div>
    `
  });

  
  app.component('test',{
    props:['count'],
    methods:{
      // 我们知道在这里我们不能修改 count 的值，因为它来自父组件
      // 但有时候我们确实需要修改这个值，我们就告诉父组件让父组件修改它
      // 也就是子组件告诉父组件自己想要调用一个方法
      // 注意，这里的 addOne 不能带 () 括号
      addOne(){
        this.$emit('addOne')
      }
    },
    template: `
        <div @click="addOne()">{{count}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613145446569.png

子组件调用父组件的方法并传参数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    methods:{
      // 在这里写一个 handleAdd() 方法
      handleAdd(param){
        this.count += param;
      }
    },
    // 父组件监听子组件要调用的方法，指向一个方法
    // 注意这里的 handleAdd 不能带 () ，因为带括号就意味着明确没有传参数
    template: `
        <div>
          <test :count="count" @add="handleAdd" />
        </div>
    `
  });

  
  app.component('test',{
    props:['count'],
    methods:{
      // 我们知道在这里我们不能修改 count 的值，因为它来自父组件
      // 但有时候我们确实需要修改这个值，我们就告诉父组件让父组件修改它
      // 也就是子组件告诉父组件自己想要调用一个方法
      // 注意，这里的 add 不能带 () 括号
      // 可以传多个参数，父组件事件中使用对应数量的参数接收即可
      add(){
        this.$emit('add', 5)
      }
    },
    template: `
        <div @click="add()">{{count}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613150236756.png

在子组件中计算出来后上传给父组件参数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    methods:{
      // 在这里写一个 handleAdd() 方法
      handleAdd(param){
        this.count = param;
      }
    },
    // 父组件监听子组件要调用的方法，指向一个方法
    // 注意这里的 handleAdd 不能带 () ，因为带括号就意味着明确没有传参数
    template: `
        <div>
          <test :count="count" @add="handleAdd" />
        </div>
    `
  });

  
  app.component('test',{
    props:['count'],
    methods:{
      // 我们知道在这里我们不能修改 count 的值，因为它来自父组件
      // 但有时候我们确实需要修改这个值，我们就告诉父组件让父组件修改它
      // 也就是子组件告诉父组件自己想要调用一个方法
      // 注意，这里的 add 不能带 () 括号
      add(){
        this.$emit('add', this.count + 3)
      }
    },
    template: `
        <div @click="add()">{{count}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613150548226.png

校验子组件对外触发的事件

在子组件里面写一个 emits: [‘方法名’] 来实现校验，因为当子组件里面的内容太多的话就影响可读性，把对外触发的事件全写在这里面有助于阅读！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    methods:{
      handleAdd(param){
        this.count = param;
      }
    },
    template: `
        <div>
          <test :count="count" @add="handleAdd" />
        </div>
    `
  });

  
  app.component('test',{
    props:['count'],
    // 在这里写一个 add 不会报错
    // 但没有写 add 而是写了一个 addOne 就会警告
    // 如果存在 emits 属性，那么对外触发的时候都要写进来，否则会警告
    emits: ['addOne'],
    methods:{
      add(){
        this.$emit('add', this.count + 3)
      }
    },
    template: `
        <div @click="add()">{{count}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613154043173.png

更多的校验

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    methods:{
      handleAdd(param){
        this.count = param;
      }
    },
    template: `
        <div>
          <test :count="count" @add="handleAdd" />
        </div>
    `
  });

  
  app.component('test',{
    props:['count'],
    // 在这里写一个 add 不会报错
    // 但没有写 add 而是写了一个 addOne 就会警告
    // 如果存在 emits 属性，那么对外触发的时候都要写进来，否则会警告
    emits: {
      // 检验参数
      add: (count) => {
        if(count > 0){
          return true;
        }else{
          return false;
        }
      }
    },
    methods:{
      add(){
        this.$emit('add', this.count + 3)
      }
    },
    template: `
        <div @click="add()">{{count}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613154340970.png

父子组件之间的”双向绑定“

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    template: `
        <div>
          <test v-model="count" />
        </div>
    `
  });

  
  app.component('test',{
    // modelValue 是固定写法
    props:['modelValue'],
    methods:{
      add(){
        // 固定写法
        this.$emit('update:modelValue', this.modelValue + 3)
      }
    },
    template: `
        <div @click="add()">{{modelValue}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613154959373.png

自定义modelValue

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        count: 1
      }
    },
    template: `
        <div>
          <test v-model:app="count" />
        </div>
    `
  });

  
  app.component('test',{
    // modelValue 是固定写法
    props:['app'],
    methods:{
      add(){
        // 固定写法
        this.$emit('update:app', this.app + 3)
      }
    },
    template: `
        <div @click="add()">{{app}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613155101659.png

参考文章

Vue3中父子组件相互触发方法
https://blog.csdn.net/weixin_45122120/article/details/119916012

訾博ZiBo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3 父向子组件、子向父组件和兄弟组件之间通信的购物车案例
m0_52411807的博客
07-18 281
main.js App.vue Count.vue Footer.vue Goods.vue Header.vue eventBus.js compute.js 五、项目地址 demo-cart
vue.js使用v-model实现父子组件间的双向通信示例
10-15
父组件通过`v-model`传递一个值到子组件，子组件则可以通过监听`input`事件并更新这个值来实现向父组件的通信。以下是对示例代码的详细解释： ```html <!-- 父组件模板 --> 这是主页面 <h1>{{ num }} ...
【Vue3 从入门到实战 进阶式掌握完整知识体系】007-Vue语法基础：列表循环渲染
訾博（ZiBo）的博客
06-20 497
文章目录7、列表循环渲染使用v-for渲染数组运行结果使用v-for渲染对象运行结果使用key优化性能运行结果控制数组给对象添加属性运行结果循环n次运行结果指定某元素不显示运行结果存在问题解决问题：使用template运行结果 7、列表循环渲染 使用v-for渲染数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
【Vue3 从入门到实战 进阶式掌握完整知识体系】012-探索组件的理念：单向数据流的理解
訾博（ZiBo）的博客
06-22 176
文章目录3、单向数据流的理解传多个参数的情况运行结果简化传多个参数的写法运行结果关于属性名运行结果单向数据流运行结果解决无法更改父组件传递过来的数据的问题运行结果为什么自组件不能改父组件的数据 3、单向数据流的理解 传多个参数的情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
【Vue3 从入门到实战 进阶式掌握完整知识体系】004-Vue语法基础：数据、方法、计算属性、侦听器
訾博（ZiBo）的博客
06-19 180
文章目录4、数据、方法、计算属性、侦听器代码运行结果计算属性和方法的不同运行结果侦听器运行结果侦听器参数代码运行结果总结 4、数据、方法、计算属性、侦听器 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
【Vue3 从入门到实战 进阶式掌握完整知识体系】010-探索组件的理念：组件概述
訾博（ZiBo）的博客
06-22 257
文章目录三、探索组件的理念1、组件概述组件图解简单使用运行结果复用组件运行结果组件可嵌套使用运行结果全局组件局部组件运行结果 三、探索组件的理念 1、组件概述 组件图解 组件的概念非常常见，类似于模块的概念 简单使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
Vue3从入门到实战进阶式掌握完整知识体系（基础案例+实战源码）.zip
最新发布
03-03
Vue3从入门到实战进阶式掌握完整知识体系（基础案例+实战源码）.zip Vue3从入门到实战进阶式掌握完整知识体系（基础案例+实战源码）.zip Vue3从入门到实战进阶式掌握完整知识体系（基础案例+实战源码）.zip
总结了-Vue3-的七种组件通信方式-别再说不会组件通信了.docx
12-18
Vue3 组件通信方式概述 在 Vue3 中，组件通信是指组件之间的数据交换和事件传递。组件通信是 Vue 应用程序中非常重要的一部分，它使得不同的组件能够协同工作，实现复杂的业务逻辑。本文将总结 Vue3 中的七种组件...
Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇
06-20
本课程主要讲解vue实例常用属性和方法、自定义指令、自定义过滤器、过度、开发插件、组件及组件间的通信、使用axios发送http请求、使用Vue Router实现路由控制，使用webpack打包工具的用法、ES6的语法、webpack与...
vue2.0父子组件及非父子组件之间的通信方法
08-31
但可以通过触发自定义事件来通知父组件进行数据更新。例如： 子组件（Child）： ```html <div @click="up"></div> export default { methods: { up() { this.$emit('upup', 'hehe'); // 触发自定义...
【Vue3 从入门到实战 进阶式掌握完整知识体系】030-Composition API：Setup函数的使用
訾博（ZiBo）的博客
06-30 291
文章目录六、Composition API1、Setup函数的使用代码运行结果setup内部更多写法运行结果Composition API 和 Options API 中的同名属性运行结果参数props运行结果props是响应式的运行结果使用ES6解构props运行结果使从props解构后的属性再次变成响应式子组件改变父组件传递过来的数据：改副本运行结果子组件改变父组件传递过来的数据：对外触发事件运行结果 六、Composition API 组合 API ，即将数据和业务逻辑放在一起处理，而不是像vue2
【Vue3 从入门到实战 进阶式掌握完整知识体系】031-Composition API：ref，reactive 响应式引用的用法和原理
訾博（ZiBo）的博客
06-30 306
文章目录2、ref，reactive 响应式引用的用法和原理动态改变setup中定义的属性运行结果使用ref是基本数据类型变成响应式运行结果实际上ref也能处理非基本类型的数据运行结果使用reactive是非基本数据类型变成响应式运行结果小结readonly使定义的属性只读运行结果解构对象的属性不是响应式的运行结果toRefs使解构对象的属性也变成响应式的运行结果 2、ref，reactive 响应式引用的用法和原理 原理：通过 proxy 对数据进行封装，当数据变化时，触发模板等内容的更新； 作用：使非
Vue之父子组件通过事件通信
知识应该共享，创造才应收费
03-09 2478
组件间传值的章节我们知道父组件给子组件传值的时候，使用v-bind的方式定义一个属性传值，子组件根据这个属性名去接收父组件的值，但是假如子组件想给父组件一些反馈呢？就不能使用这种方式来，而是使用事件的方式，父组件通过注册这个事件的监听来接收子组件的信息，然后做对应的操作。
Vue3-你不知道的父子组件传递细节
欢迎访问我的主页：https://www.bookbook.cc
09-16 886
一、父组件给子组件传递非Prop的Attribute 何为非Prop的Attribute? 即：当传递给组件某项值时，如果没有在 props定义，那么则称呼为非Prop的Attribute。 当这种时候传递参数，会出现三种情况 App.vue <template> <div id="home"> <show-message id="show-id" class="show-class" title="show-title"></show-message&
vue3 组件间互相通信（包括父子、爷孙、兄弟、全局）
热门推荐
技术前端，忠于热爱 @回忆哆啦没有A梦
04-11 2万+
vue3 组件间通信方式（包括父子、爷孙、兄弟、全局），最全面的组件通信方式。
VUE3 父子组件传参、事件传递
Cxiaomu的博客
07-13 2188
最近由于刚接触使用VUE3开发需求，涉及到VUE3父子组件传参、事件传递情景，在开发中做一些积累。
vue3父组件触发子组件事件或数据
时光从指尖划过的博客
08-24 4718
vue3 父组件调用子组件事件，子组件需通过defineExpose暴露方法或者数据
Vue 3 父子组件传递数据的几种通信方式 (Prop、自定义事件、v-model...)
Hello World
05-10 4090
对比 Vue 2 的相关变化 - `v-on` 的 `.native` 修饰符已被移除。 - Vue 3 现在提供一个 `emits` 选项，和现有的 `props` 选项类似。 `v-bind` 的 `.sync` 修饰符和组件的 `model` 选项已移除 父组件向子组件传递数据（ Prop ） 子组件向父组件传递数据（ 自定义事件 ） 父子组件双向数据绑定（ v-model ） 其他方式（ 插槽、Provide / Inject ） 在这里不得不插一嘴，我个人觉得 组合式 API 是真的好用！
Vue3 父子组件
qq_29744347的博客
05-09 2375
文章目录组件传值子组件调用父组件方法父组件调用子组件方法完整示例 组件传值 在子组件中通过props声明需要传参参数 父组件传值 通过 :参数进行传参 子组件调用父组件方法 子组件通过$emit(,…) 触发父组件事件 父组件方法名，父组件通过@来声明该事件 可以给父组件事件传参 父组件调用子组件方法 如果需要让父组件调用子组件方法 需要在父组件中暴露子组件给模版 在子组件中暴露其方法给模版 需要使用setup，其在vue官方文档中解释为(顶级绑定暴露给模板) 完整示例 子组件 MaskM
Vue-element-admin v4.4 完整指南：从入门到实战
这份文档涵盖了从基础配置到高级特性的深入讲解，旨在帮助开发者快速上手并掌握这个流行的前端框架。 **基础部分**： 文档首先介绍了 Vue 2.6.10 的版本背景和兼容性，以及 Element-UI 的版本（2.7.0），这是整个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值