鸳鸯亭资源网 Design By www.gvabc.com
业务场景:(这里指的是直接父子级关系的通信)
- 美女(子组件)将消息发送给大群(父组件)
- 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件)
父组件
template
<template> <div> <p>群消息girl:</p> <div> {{ somebody }} 说: 我 {{ age }} 了。 </div> <hr> <v-girl-group :girls="aGirls" :noticeGirl="noticeGirl" @introduce="introduceSelf"></v-girl-group> </div> </template>
注意的点:
- 这里在父组件使用v-on来监听子组件上的自定义事件($emit的变化),一旦发生变化noticeGirl方法就会触发
<script> import vGirlGroup from './GirlGroup' export default { name: 'girl', components: { vGirlGroup }, data () { return { aGirls:[{ name:'小丽', age:22 },{ name:'小美', age:21 },{ name:'小荷', age:24 }], somebody:'', age:'', noticeGirl:'' } }, methods: { introduceSelf (opt) { this.somebody = opt.name; this.age = opt.age; // 通知girl收到消息 this.noticeGirl = opt.name + ',已收到消息'; } } } </script>
注意的点:
这里methods中定义的方法introduceSelf就是父组件接收到子组件发出的$emit的事件处理程序
子组件
template
<template> <div> <ul> <li v-for="(value, index) in girls"> {{ index }} - {{ value.name }} - {{ value.age }} <button @click="noticeGroup(value.name,value.age)">发送消息</button> </li> </ul> <div>接收来自大群的消息:{{ noticeGirl }}</div> </div> </template>
script
<script> export default { name: 'girl-group', props: { girls: { type: Array, required: true }, noticeGirl: { type: String, required: false } }, methods: { noticeGroup (name, age) { this.$emit('introduce',{ name: name, age: age }) } } } </script>
注意的点:
子组件使用$emit发出自定义事件
相比于Vue1.x的变化:
$dispatch 和 $broadcast 已经被弃用
*官方推荐的通信方式
首选使用Vuex
使用事件总线:eventBus,允许组件自由交流
具体可见:https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换
结果
以上所述是小编给大家介绍的Vue2.x中的父子组件相互通信,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
鸳鸯亭资源网 Design By www.gvabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
鸳鸯亭资源网 Design By www.gvabc.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 林忆莲.2019-0(2023精装版)【环球】【WAV+CUE】
- Supper.Moment.2016-The.Moment【寰亚】【FLAC分轨】
- 范莉丝.1979-送郎一朵牵牛花(LP版)【大联机构】【WAV+CUE】
- 刘宇.2024-宇宙诗人【哔哟哔哟文化】【FLAC分轨】
- 《全景声白噪音》沉浸式大自然助眠 带你听自然的声音[mp3]
- 纯音入心系列纯音乐《古筝精选 十指弹一赏心曲一心奏出世人心》1CD[MP3][582MB]
- 纯音入心系列纯音乐《古筝与现代音乐的交织》1CD[MP3][96MB]
- 王俪婷.2011-ROMANCE【华研国际】【WAV+CUE】
- 狮子合唱团.2016-LION(引进版)【华纳】【WAV+CUE】
- 范文芳.1996-FNNTASY【HYPE】【WAV+CUE】
- 纯音入心系列纯音乐《韵味古筝曲》1CD[MP3][146.2MB]
- 纯音入心系列纯音乐《古筝系列-传统乐曲》1CD[MP3][974.7MB]
- 纯音入心系列纯音乐《古筝系列-弦凝指咽声停处》1CD[MP3][656.5MB]
- 群星.1994-大烂片2辑【派森】【WAV+CUE】
- 吴倩莲.1997-望爱【EMI百代】【WAV+CUE】