AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【Vue3从零开始-第三章】3-5 父子组件之间事件通信

2022-09-26 2011
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Vue3从零开始-第三章】3-5 父子组件之间事件通信

]UWOD(KIB9LJS9~S[T{QHM9.png


前言


在上一篇的文章中，我们了解了vue组件Non-Props属性，今天我们继续深入了解一下vue组件中的父子组件之间通信。


回顾


在前面的几篇文章中，我们知道组件之间传值的时候，可以通过父组件调用子组件标签，然后在子组件标签上用动态传参的方法传递给子组件，但是子组件没办法去修改父组件的值，因为子组件接收到的值是只读的。


<script>
  const app = Vue.createApp({
    data(){
      return {
        count: 1
      }
    },
    template: `
      <div>
        <counter :count="count" />
      </div>
    `
  });
  app.component('counter', {
    props: ['count'],
    methods: {
      handleClick(){
        this.count += 1
      }
    },
    template: `
      <div @click="handleClick">{{count}}</div>
    `
  })
  const vm = app.mount('#root');
</script>
复制代码


[Vue warn]: Attempting to mutate prop "count". Props are readonly.


今天的文章中我们将详细讲解一下父子组件如何通过事件方法进行通信。


$emit


  • $emit：子组件触发父组件事件的方法 当子组件中无法完成的一些事件操作时，可


  • 以通过$emit方法通知父组件去完成。下面我们就来改造一下上面的代码。


handleClick(){
    this.$emit('addOne')
}
复制代码


  • this.$emit()：这个方法时一个固定的写法，也是vue提供的事件，意思就是我要向外部触发一个事件，传入事件名称即可。


既然子组件要通知父组件触发一个事件，那么父组件就得接收到子组件传递过来的事件。


const app = Vue.createApp({
    data(){
      return {
        count: 1
      }
    },
    methods: {
      handleAddOne(){
        this.count += 1
      }
    },
    template: `
      <div>
        <counter :count="count" @add-one="handleAddOne" />
      </div>
    `
  });
复制代码


  • 父组件中可以在子组件标签上通过v-on指令（简写@）接收子组件触发的事件。


  • 子组件触发事件是采用驼峰形式去写方法名，父组件接收的时候需要改成-接收方法名。


  • 父组件接收到子组件传递过来的方法之后，就可以触发父组件内部方法了


BOJL`I5}%N6H{QHS_V001IR.png


传参


通过上面的代码我们看到父子组件之间通过事件已经可以进行通信了，但是我们只是触发了事件而已，当我们需要在子组件里面传递参数要咋整呢？


  • 子组件触发的事件中，调用$emit方法时，除了定义方法名之外，后面还可以直接携带参数。


handleClick(){
    this.$emit('add', 2)
}
复制代码


  • 父组件触发的事件中，可以直接在方法中接收子组件传递过来的参数。


const app = Vue.createApp({
    data(){
      return {
        count: 1
      }
    },
    methods: {
      handleAddOne(param){
        this.count += param
      }
    },
    template: `
      <div>
        <counter :count="count" @add="handleAddOne" />
      </div>
    `
});
复制代码


B11N%AY4UGVH_LNK0J`(D6H.png


  • $emit方法后面携带的参数可以是多个。


// 子组件中的事件
handleClick(){
    this.$emit('add', 2, 3)
}
// 父组件中的事件
handleAddOne(param1, param2){
    this.count += param2
}
复制代码


B11N%AY4UGVH_LNK0J`(D6H.png


  • $emit方法后面携带的参数也可以直接进行计算。


// 子组件中的事件
handleClick(){
    this.$emit('add', this.count + 4)
}
// 父组件中的事件
handleAddOne(count){
    this.count = count
}
复制代码


(8~(~0IXOR7T6G06@F%]SEE.png


emits


  • emits：校验对外触发的方法名


app.component('counter', {
    props: ['count'],
    emits: ['add'],
    methods: {
      handleClick(){
        this.$emit('add', this.count + 4)
      }
    },
    template: `
      <div @click="handleClick">{{count}}</div>
    `
})
复制代码


在子组件中可以定义emits来校验$emit中的方法名，如果一致则可以触发成功。


emits: ['minus'],
复制代码


如果我们将子组件中的emits定义的值和$emit中的方法名不一致，则会在浏览器控制台中进行提示。


[Vue warn]: Component emitted event "add" but it is neither declared in the

emits option nor as an "onAdd" prop.


除了在emits中使用数组定义方法名之外，还可以通过对象的方式进行校验。


emits: {
    add: (count) => {
        if(count < 0){
          return true
        }
        return false
    }
},
复制代码


  • 在emits对象中可以监听$emit中的方法名，触发一个事件的时候可以获取到$emit中传递的参数值。


当监听对象中校验不通过时，也会在浏览器控制台中进行提示。


[Vue warn]: Invalid event arguments: event validation failed for event "add".


v-model


在以前的文章中，我们知道v-model指令是做双向数据绑定的，其实它也可以做父子组件通信的指令。


<script>
  const app = Vue.createApp({
    data(){
      return {
        count: 1
      }
    },
    template: `
      <div>
        <counter v-model="count" />
      </div>
    `
  });
  app.component('counter', {
    props: ['modelValue'],
    methods: {
      handleClick(){
        this.$emit('update:modelValue', this.modelValue + 5)
      }
    },
    template: `
      <div @click="handleClick">{{modelValue}}</div>
    `
  })
  const vm = app.mount('#root');
</script>
复制代码


  • 父组件中调用子组件标签时，可以直接使用v-model指令进行传值。


  • 子组件中通过props接收父组件中的参数modelValue。


  • $emit方法中，直接通过update:modelValue的事件就可以对父组件的值进行修改了。


(8~(~0IXOR7T6G06@F%]SEE.png

modelValue是默认写法，不可以随意更改。


但是有些时候，我们需要自定义父组件传递给子组件的参数名称要怎么做呢？


<script>
  const app = Vue.createApp({
    data(){
      return {
        count: 1
      }
    },
    template: `
      <div>
        <counter v-model:count="count" />
      </div>
    `
  });
  app.component('counter', {
    props: ['count'],
    methods: {
      handleClick(){
        this.$emit('update:count', this.count + 6)
      }
    },
    template: `
      <div @click="handleClick">{{count}}</div>
    `
  })
  const vm = app.mount('#root');
</script>
复制代码


  • 直接在父组件中的子组件标签上使用v-model:xxx的方式进行自定义名称即可。


  • 子组件就接收自定义的名称进行渲染和操作。


(8~(~0IXOR7T6G06@F%]SEE.png

总结


本篇文章主要讲解了vue中的父子组件之间通过事件通信的方法：$emit、v-model，也讲解了在进行通信时可以传递参数，也可以对传递的方法和参数进行校验。

文章标签：
JavaScript
关键词：
vue3父子组件VUE.js
事件VUE.js
vue3父子组件通信VUE.js
vue3通信VUE.js
父子组件通信VUE.js
蜡笔小心_
目录
相关文章
html的七十二变
|
9天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
26 5
html的七十二变
|
9天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
20 4
CamilleKing
|
17天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
38 7
小宋1021
|
18天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
小宋1021
39 3
CamilleKing
|
17天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
36 1
CamilleKing
|
17天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
39 1
北海的大鱼
|
JavaScript
Vue父子组件传值（porvide+inject实现组件通信）
如果我们需要把父组件的值传递给子组件，而且子组件可能存在层层嵌套，那么就可以使用provide+inject的方法来实现组件之间的通信
北海的大鱼
192 0
Vue父子组件传值（porvide+inject实现组件通信）
前端歌谣
|
JavaScript 前端开发
前端-vue基础63-非父子组件传值
前端-vue基础63-非父子组件传值
前端歌谣
93 0
前端-vue基础63-非父子组件传值
龙哥手记
|
JavaScript
Vue非父子组件又如何传值
笔记
龙哥手记
183 0
龙哥手记
|
JavaScript
Vue父子组件是如何传值
笔记
龙哥手记
179 0

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 4
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 5
    自制简单的range（Vue）
  • 6
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 7
    vite原理之解析.vue文件
  • 8
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 9
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 10
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 1
    vue(1)，小白看完都会了
    43
  • 2
    深入理解Vue.js中的nextTick：实现异步更新的奥秘
    147
  • 3
    Vue中避免滥用this去读取data中数据
    43
  • 4
    vue3服务端渲染警告解决----DefinePlugin
    120
  • 5
    vue中使用pinia及持久化
    60
  • 6
    Vue3与Vue2：对比分析与迁移指南
    394
  • 7
    双向数据绑定：Vue.js的魔法背后
    56
  • 8
    Vue class和style绑定：动态美化你的组件
    82
  • 9
    Vue 监听器：让你的应用实时响应变化
    199
  • 10
    vue3封装面包屑
    146

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件
    • 下一篇
    阿里云OSS设置跨域访问