vue中 关于$emit的用法

vue中 关于$emit的用法1、父组件可以使用props把数据传给子组件。2、子组件可以使用$emit触发父组件的自定义事件。vm.$emit(event,arg)//触发当前实例上的事件vm.$on(event,fn);//监听event事件后运行fn;例如:子组件:<template><divclass=”train-city”>&l………

大家好,又见面了,我是你们的朋友全栈君。

vue2.x

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit,让父组件监听到自定义事件 。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn; 

例如:子组件:

<template>
  <div class="train-city">
    <h3>父组件传给子组件的toCity:{
  
  {sendData}}</h3> 
    <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
  </div>
</template>
<script>
  export default {
    name:'trainCity',
    props:['sendData'], // 用来接收父组件传给子组件的数据
    methods:{
      select(val) {
        let data = {
          cityname: val
        };
        this.$emit('showCityName',data);//select事件触发后,自动触发showCityName事件
      }
    }
  }
</script>

父组件:

<template>
    <div>
        <div>父组件的toCity{
  
  {toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
<template>
<script>
  import TrainCity from "./train-city";
  export default {
    name:'index',
    components: {TrainCity},
    data () {
      return {
        toCity:"北京"
      }
    },
    methods:{
      updateCity(data){//触发子组件城市选择-选择城市的事件
        this.toCity = data.cityname;//改变了父组件的值
        console.log('toCity:'+this.toCity)
      }
    }
  }
</script>

图一:点击之前的数据

vue中 关于$emit的用法

图二:点击之后的数据

vue中 关于$emit的用法

vue3.x

 子组件

<template>
  <div class="train-city">
    <h3>父组件传给子组件的toCity:{
  
  {sendData}}</h3> 
    <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
  </div>
</template>

<script>
export default {
  name: "train-city",
  props:{
    sendData:{
      Type:String,
      default:""
    }
  },
  emits: ["showCityName"],
  setup(props,{emit}) {
    return {
      select: () => { emit('showCityName') }
    }
  },
}
</script>

父组件

<template>
    <div>
        <div>父组件的toCity{
  
  {toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
<template>
<script>
import TrainCity from "./train-city";
import { reactive, toRefs} from '@vue';
export default {
  name: "parent-com",
  components: { TrainCity },
  setup() {
    const state = reactive({ toCity:"北京" })  

    const updateCity = (data) => {
         state.toCity = data.cityname;//改变了父组件的值
         console.log('toCity:' + state.toCity)
    }

    return {
      ...toRefs(state ),
      updateCity
    }
  },
}
</script>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152848.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Oracle 11g新特性invisible index(不可见的索引)[通俗易懂]

    Oracle 11g新特性invisible index(不可见的索引)

  • 关于OpenCV中图像的widthStep

    关于OpenCV中图像的widthStep在OpenCV的IplImage指针结构中,有一个成员widthStep,这个值如何来确定呢,最近让我头疼了好久,终于想明白了,现在拿出来跟大家交流一下,不知道我的想法对吗,起码在我验证时没有出错。    widthStep应该等于width*3,但是由于4字节对齐问题,有时候需要在一行的末尾需要填充1-3个字节,这时候widthStep>width*3。因此,widthSte

  • h3c bios密码_日本服务器ip端口密码

    h3c bios密码_日本服务器ip端口密码版本Ladon>=7.1139端口NetBIOSFileandPrintSharing通过这个端口进入的连接试图获得NetBIOS/SMB服务。这个协议被用于Windows”文件和打印机共享”和SAMBA。IPC$通信Windows系统中的netuseipc整个通信过程,先445−>137−>139验证,当你开启防火墙禁用445,发现系统命令就无法连接IPC了,根本没机会走到139,所以使用系统自带命令连接的ipc整个通信过程,先445->137->

  • 8.app后端和web后端的区别

    8.app后端和web后端的区别很多从web后端转到app后端的小伙伴经常很茫然,不知道这两者之间有啥区别。本文通过例子,分析web后端和app后端的区别,使各位更好地把握app后端的架构。

  • 舵机控制原理和结构图_舵机的相关原理与控制原理

    舵机控制原理和结构图_舵机的相关原理与控制原理原文:https://blog.zeruns.tech/index.php/archives/358/什么是PWM信号PWM,英文名PulseWidthModulation,是脉冲宽度调制缩写,它是通过对一系列脉冲的宽度进行调制,等效出所需要的波形(包含形状以及幅值),对模拟信号电平进行数字编码,也就是说通过调节占空比的变化来调节信号、能量等的变化,占空比就是指在一个周期内,信号处于高电平…

    2022年10月26日
  • Python打造最强告白代码,世界这么大,你的那个他总会遇见的(源码可直接运行)[通俗易懂]

    Python打造最强告白代码,世界这么大,你的那个他总会遇见的(源码可直接运行)[通俗易懂]能和喜欢的人在一起是一件多么美好幸福的事,可现实却并非如此,喜欢的我不敢表白,我们往往都感觉喜欢的那个人特别的优秀,也就是情人眼里出西施,即使互相都喜欢了,又有些人因羞于表达,或怕被拒绝而错过了对方,爱情就是这般捉弄人。有一首歌写得好,爱需要勇气,确实如此,希望看到这的你,能勇敢迈出第一步,勇敢追求自己的幸福,收获美好的爱情。文章末尾有惊喜。1.遇见你我很幸运❤❤要是有机会的话,我想和你一起喝奶茶,一起看电影一起吹晚风回家,一起走剩下的路,我的意思是:和你。完整源码:代码里面可以

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号