vue组件通信---子传父（自定义事件$emit(eventName,data)）

已于 2024-04-09 16:12:13 修改
阅读量8.6k 收藏 17
点赞数 1
分类专栏： vuejs 文章标签： $emit vue 子传父 vue子组件向父组件传值 .sync vue子组件调用父组件中的方法
于 2019-11-20 12:07:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muzidigbig/article/details/103159100
版权

一、概括

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。

绑定事件监听

// 方式一: 通过 v-on 绑定
@delete_todo="deleteTodo"

// 方式二: 通过$on()；生命周期监听自定义事件
this.$refs.xxx.$on('delete_todo',function(todo){
    this.deleteTodo(todo) 
})

注意：this.$on(['delete_todo','delete_todo2']) 可以监听多个事件

触发事件

// 触发事件(只能在父组件中接收)
this.$emit(eventName,data)

 注意:
1) 此方式只用于子组件向父组件发送消息(数据)

2) 问题: 隔代组件或兄弟组件间通信此种方式不合适

$emit 传递多个参数

方法一：将要传的数据放到对象中，再将对象传给父组件

子组件：

let obj = {
	data1: '111',
	data2: '222'
}
this.$emit('getData',obj)

父组件：

<child @getData="getData"></child>
getData(data){
	console.log(data) // {data1:'111',data2:'222'}
}

方法二：直接传递多个参数

子组件：

this.$emit('getData','111','222')

父组件：

接收的时候要传 arguments 参数

<child @getData="getData(arguments)"></child>
getData(data){
	console.log(data[0],data[1]) // '111' '222'
}

二、案例

方式一：@xxx='xxxx'

案例：
第一步：在子组件中创建一个按钮，给按钮绑定一个点击事件

第二步：在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数(自定义事件名)

第三步：在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

第四步：使用传递过来的数据(父组件中响应的事件参数)

child.vue

<template>
    <div class="child">
        <h2>child子组件</h2>
        <!-- 第一步 -->
        <button @click="sendMsgToParent">点击向父组件传数据</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            message: '子组件的data'
        }
    },
    methods: {
        /** 
         * 第二步
        */
        sendMsgToParent() {
            //在子组件中使用$emit(eventName,data)来触发一个自定义事件，并传递一个参数
            this.$emit('listenToChildEvent',this.message);
        }
    }
}
</script>

parent.vue

<template>
    <div class="parent">
        <h1>子传父emit</h1>
        <hr>
        <!--第三步 
            定义一个listenToChildEvent自定义事件监听子组件的触发
            在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法 -->
        <child @listenToChildEvent='showMsgFromChild'></child>
        <p>来自于子组件的数据为：{{fromChildData}}</p>
    </div>
</template>
<script>
import child from './child'
export default {
    data() {
        return {
            fromChildData: ''
        }
    },
    components:{
        child
    },
    methods: {
        /** 
         * 第四步
         * 响应事件的参数为子组件传递过来的值
        */
        showMsgFromChild(data) {
            this.fromChildData = data
        }
    }
}
</script>

方式二：$refs.xxx.$on()对事件进行监听

// 方式二: 通过$on()；生命周期监听自定义事件
this.$refs.xxx.$on('delete_todo',function(todo){
    this.deleteTodo(todo) 
})

或者this.$on();进行 事件的监听，可以监听多个

child.vue

<template>
  <div class="child">
    <div>
      <button @click.stop="childToFatherClick">点击子组件</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "child",
  data() {
    return {
      msg: { id: 1, name: "father", age: 53, sex: "男" }
    };
  },
  methods: {
    childToFatherClick() {
      this.$emit("childToFatherData", this.msg);
    }
  }
};
</script>

parent.vue

<template>
  <div class="childToFather">
    <h3>方式二</h3>
     <!--用ref给子组件起个名字-->
    <child ref="child02"></child>
    <p v-if="msg1.id">{{msg1}}</p>
  </div>
</template>
<script>
import child from "../../../components/child";
export default {
  name: "childToFather",
  components: {
    child
  },
  data() {
    return {
      msg1: {}
    };
  },
  mounted() { // 子组件触发自定义事件，挂载到mounted上实现子传父
    let _this = this;
    this.$refs.child02.$on("childToFatherData", function(data) {
      console.log(data);
      // 需要注意this指向问题
      _this.msg1 = data;
    });
  },
};
</script>

方式三：.sync

上面的语法糖

vue中我们经常会用v-bind(缩写为:)给子组件传入参数。
或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。
例如：

//父组件给子组件传入一个函数
 <MyFooter :age="age" @setAge="(res)=> age = res">
 </MyFooter>
 //子组件通过调用这个函数来实现修改父组件的状态。
 mounted () {
      console.log(this.$emit('setAge',1234567));
 }

这时子组件触发了父组件的修改函数使父组件的age修改成了1234567

这种情况比较常见切写法比较复杂。于是我们引出今天的主角 .sync

vue .sync的历史
vue .sync 修饰符最初存在于 vue 1.0 版本里，但是在 2.0 中被移除了。但是在 2.0 发布之后的实际应用中，vue 官方发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。开发者需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起官方重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。 .sync 可以有多个

这时我们可以直接这样写

//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age">
</MyFooter>
// 子组件事件触发 update:固定写法 (update:props名称, 值)
 mounted () {
    console.log(this.$emit('update:age',1234567));
 }

这里注意我们的事件名称被换成了 update:age
update：是被固定的也就是vue为我们约定好的名称部分
age：是我们要修改的状态的名称，是我们手动配置的，与传入的props状态名字对应起来

这样就完成了，是不是感觉简单了很多。

注意事项：
这里我们必须在事件执行名称前加上update：的前缀才能正确触发事件。

三、vue子组件调用父组件中的方法

有时候，我们会把方法定义在​​​​​​​父组件中，然后在多个子组件中调用父组件的方法，这是很常见的场景。那么，在子组件中调用父组件的方法有哪几种方式呢？

1. provide/inject

在某些场景下，我们的组件嵌套层级会非常深，这个时候如果使用 props 的方式传递祖先组件的方法或属性，并不是一个明智的选择，我们应该使用 provide/inject 来跨层级访问祖先组件的数据。

provide 向子孙组件提供父组件的方法或属性。provide 是一个对象或返回一个对象的函数，该对象包含了可注入其子孙的 property。
inject 是一个字符串数组或一个对象

使用方式：

  • 祖先组件里提供 provide
  • 子孙组件里，inject相应的名字即可

父组件 

// Parent.vue

<template>
  <div class="container">
    <h3>provide/inject 传递方法</h3>
    <div class="description">
      在父组件中通过 provide 向子孙组件提供方法，在子孙组件中通过 inject
      获取父组件提供的方法
    </div>
    <br />
    <Child></Child>
  </div>
</template>

<script>
import Child from "./Children";

export default {
  name: "Father",
  components: {
    Child,
  },
  provide() {
    return {
      fatherMethod: this.fatherMethodHandle,
    };
  },
  methods: {
    fatherMethodHandle() {
      console.log("我是父组件的方法");
    },
  },
};
</script>

<style scoped lang="scss">
</style>

子组件

// Child.vue

<template>
  <div>
    <button @click="childMethod">我是子组件</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    msg: String,
  },
  inject: ["fatherMethod"],
  methods: {
    childMethod() {
      console.log("我是子组件的方法，我在子组件中调用了父组件的方法");
      this.fatherMethod();
    },
  },
};
</script>

<style scoped lang="scss">
</style>

注意：通过 provide/inject 注入的属性在子孙组件中是无法使用 watch的

2. $props

在父组件中通过 props 的方式传入子组件中，在子组件中直接调用这个方法。在嵌套层级很深的子组件中不建议使用 props 的方式传递父组件的方法，因为层层传递会导致代码变得难以维护。

父组件

// Parent.vue

<template>
  <div class="container">
    <h3>props 方式传递方法</h3>
    <div class="description">
      在父组件中通过 props 的方式 向子孙组件传递方法
    </div>
    <br />
    <Child :fatherMethod="fatherMethodHandle"></Child>
  </div>
</template>

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

export default {
  name: "Father",
  components: {
    Child,
  },
  methods: {
    fatherMethodHandle() {
      console.log("我是父组件的方法");
    },
  },
};
</script>

<style scoped lang="scss">
</style>

子组件

// Child.vue

<template>
  <div>
    <button @click="childMethod">我是子组件</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    fatherMethod: {
      type: Function,
      require: true,
      default: null,
    },
  },
  methods: {
    childMethod() {
      console.log(
        "我是子组件的方法，我在子组件中通过 props 的方式调用了父组件的方法"
      );
      this.fatherMethod();
    },
  },
};
</script>

<style scoped lang="scss">
</style>

3. $parent

在子组件中通过 this.$parent.event 的方式来调用父组件的方法。在嵌套层级很深的子组件中不建议使用该方式。

父组件

// Parent.vue

<template>
  <div class="container">
    <h3>$parent 获取父组件方法</h3>
    <div class="description">
      在子组件中通过 Vue 实例的 $parent 方法获取父组件的方法
    </div>
    <br />
    <Child></Child>
  </div>
</template>

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

export default {
  name: "Father",
  components: {
    Child,
  },
  methods: {
    fatherMethodHandle() {
      console.log("我是父组件的方法");
    },
  },
};
</script>

<style scoped lang="scss">
</style>

 子组件

// Child.vue

<template>
  <div>
    <button @click="childMethod">我是子组件</button>
  </div>
</template>

<script>
export default {
  name: "Child",

  methods: {
    childMethod() {
      console.log(
        "我是子组件的方法，我在子组件中通过 $parent 调用了父组件的方法"
      );
      this.$parent.fatherMethodHandle();
    },
  },
};
</script>

<style scoped lang="scss">
</style>

muzidigbig
关注
  • 1
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue 组件间通信方式
珍妮的小罐君
05-31 296
前言 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如p...
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
子组件可以通过 $emit 触发事件，参数为自定义事件名称，写法可以是小写或者用 - 连接，例如 event 或 event-name。父组件可以通过 v-on 监听事件，获取数据。 // 父组件：parent.vue <child v-on:childevent='...
Vue组件通信(父传子、子传父、兄弟通信)
亚洲的博客
01-08 2118
一、父传子 首先在父组件的子组件上定义一个属性，在属性上挂载要传输的变量，然后在子组件中通过prop来接收 1、父组件parent.vue <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> </templa
组件传递数据——$emit（子传父）
weixin_46372993的博客
08-04 2327
emit的用法提示：以下是本篇文章正文内容，下面案例可供参考（1）ParentComponent组件data() {（2）ChildComponent组件（3）App.vueemit用于触发自定义事件。通过$emit方法可以在组件内部触发一个自定义事件，并传递数据给父组件或其他监听该事件的组件。使用emit的语法为：this.$emit(eventName, data)，其中eventName为自定义事件的名称，data为要传递的数据（可选）。
vue中使用emit
最新发布
BradenHan的专栏
06-13 1141
Vue 3 中，通过在子组件的setup函数中使用明确定义要发出的事件，以及在父组件中使用模板语法监听这些事件，实现了更清晰和类型安全的父子组件通信。这种方式鼓励开发者提前规划组件间通信的接口，提高了代码的可维护性和可读性。
如何在Vue.js中使用$emit进行组件通信
bxstephen的专栏
12-30 905
在Vue.js中使用$emit进行组件通信。
Vue的$emit传值
热门推荐
xiaoxiaoluckylucky的博客
03-08 1万+
$emit，父组件传data给子组件，子组件通过$emit来触发父组件中绑定在子组件身上的事件，达到改变父组件中的data的方法。下面介绍$emit传值的几种方法： 一：$emit传递单值 子组件Test.vue： <template> <div> <div>子组件</div> <button @click="changeFather">点击我向父组件传递参数</button> </div> </tem
Vue：自定义组件事件
islunatic的博客
04-16 1909
组件
什么？？？你连vue中父组件怎么监听子组件的事件都不知道？快来看看vue2和vue3中父组件监听子组件事件的区别吧
qq_45745778的博客
04-10 3324
vue2和vue3中父组件监听子组件事件
Vue子组件向父组件传值的几种方式
我唤来了星繁，似灭似绚烂
06-24 9198
一. 使用slot插槽 1.子组件： <template> <div> <slot name="icon" :text="text"></slot> </div> </template> <script> export default{ data(){ return {...
Vue $emit $refs子父组件间方法的调用实例
11-30
在子组件中，我们可以在方法中调用`this.$emit(eventName, data)`来触发事件，其中`eventName`是你自定义的事件名，`data`是要传递的数据。例如，在给定的例子中，子组件有一个`emitEvent`方法，当按钮被点击时，它...
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
10-18
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值，需要的朋友参考下吧
vue 组件间的通信之子组件向父组件传值的方式
10-15
本文主要探讨的是Vue组件间通信的一个特定场景：子组件如何向父组件传递值。 首先，我们了解一个基本概念：父组件通过属性向子组件传递值。在Vue中，父组件可以通过在子组件标签上使用`v-bind`指令（简写为`:`)将...
Vue组件通信eventbus封装-类方式.zip
08-02
Event Bus，又称自定义事件，是一种轻量级的通信机制，它通过创建一个全局的Vue实例来实现非父子组件间的通信。下面我们将详细介绍如何使用类方式进行Event Bus的封装。 首先，我们来看压缩包中的`EventBus.js`文件...
vue--子传父、父传子
weixin_66375317的博客
05-08 4423
vue --子传父 、父传子
vue中的子传父和父传子
qq_51805824的博客
07-06 3792
vue中的子传父、父传子详细步骤
vue学习（六）子组件的事件传递给父组件
我是混IT圈的
03-09 3256
1、子组件：DemoHello.vue <template> <!-- @click="getUserInfo()"： 子组件自定义事件 --> <div class="demo" @click="getUserInfo()"> <h1>测试创建组件</h1> </div> </template> <script> export default { name: 'Demo
vue 子组件向父组件传递数据（自定义事件）
weixin_45307792的博客
12-06 1483
vue使用props可以让父组件向子组件传递数据，那怎么让子组件向父组件传递数据呢？这里就要用到（自定义事件）。 我们在子组件中使用$emit向父组件发射一个自定义事件和数据，通过这个自定义事件我们可以通过父组件的方法获取发送过来的数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <sc...
vue2中子组件向父传值$emit方法的使用
ONLYSRY的博客
10-09 5714
vue2中子组件向父传值$emit方法的使用。
lit-element 像vue$emit 监听事件
03-29
lit-element 提供了一个事件系统，可以使用 `this.dispatchEvent(new CustomEvent(eventName, {detail: data}))` 发送事件，并使用 `this.addEventListener(eventName, callback)` 监听事件。类似于 Vue 的 `$emit` 和 `$on`。 举个例子： ```javascript import {LitElement, html} from 'lit-element'; class MyElement extends LitElement { static get properties() { return { count: {type: Number}, }; } constructor() { super(); this.count = 0; } render() { return html` <button @click="${this._increment}">+1</button> `; } _increment() { this.count++; this.dispatchEvent(new CustomEvent('count-changed', {detail: this.count})); } connectedCallback() { super.connectedCallback(); this.addEventListener('count-changed', this._onCountChanged); } disconnectedCallback() { super.disconnectedCallback(); this.removeEventListener('count-changed', this._onCountChanged); } _onCountChanged(event) { console.log(event.detail); // 输出最新的 count 值 } } customElements.define('my-element', MyElement); ``` 在上面的例子中，当用户点击按钮时，我们使用 `_increment` 方法增加了 `count` 的值，并通过 `dispatchEvent` 发送了一个自定义事件 `count-changed`，事件的 `detail` 属性设置为最新的 `count` 值。然后在 `connectedCallback` 方法中，我们使用 `addEventListener` 监听了这个事件，并将 `_onCountChanged` 方法作为回调函数。在 `_onCountChanged` 方法中，我们可以获取到事件的 `detail` 属性，从而获取最新的 `count` 值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值