Vue学习笔记组件间通过事件通讯

最新推荐文章于 2024-04-29 15:36:48 发布

petit_wu

最新推荐文章于 2024-04-29 15:36:48 发布

阅读量190

点赞数

分类专栏： vue 文章标签： vue javascript vue.js html

本文链接：https://blog.csdn.net/petit_wu/article/details/114921095

版权

这篇博客详细介绍了在Vue中如何实现组件间的通信，特别是子组件如何调用父组件的事件，并传递参数。子组件通过`emits`声明并使用`this.$emit('event', params)`触发事件，父组件则通过`@event="method"`监听并接收参数。同时，文章提到了未声明`emits`时虽然仍可触发事件但会导致控制台警告，以及如何启用参数校验功能。" 90345708,8404833,MariaDB集群配置与Galera多主搭建,"['mariadb集群', '主从复制', '主从同步原理', 'mariadb多主']

摘要由CSDN通过智能技术生成

子组件调用父组件事件

父组件在标签通过@add="父组件方法"添加一个响应事件，子组件通过emits声明引用父组件事件，子组件的方法通过 this.$emit('add') 调用父组件的某个事件（例如add）

如果子组件不用emits声明，其实也可以调用，但控制台会打印警告

父组件：
methods: {
            addCounter() {
                this.counter += 1;
            }
        }
<global :counter="counter" @add="addCounter"/>

子组件：
        emits: ['add'],
        methods: {
            globalAddCounter() {
                this.$emit('add');
            }
        },
        template: `
            <h3>子组件{
  {counter}}</h3>
            <button @click="globalAddCounter">子组件点击+1</button>
        `

向父组件事件中传递参数

子组件在this.$emit('add', 2)调用时，把参数值2传递给父组件，父组件方法中通过参数param (参数名字可以随便起)接受这个参数值

可以传递多个参数

父组件methods：
            addCounterTwo(param) {
                this.counter += param;
            }
子组件methods：
        methods: {
            globalAddCounter() {
                this.