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)
blank

相关推荐

  • protel99se学习笔记

    protel99se学习笔记第一次画原理图,遇到好多问题,zuoxi

  • Verilog HDL 快速入门

    VerilogHDL快速入门VerilogHDL是一种硬件描述语言(HDL:HardwareDescriptionLanguage),它是以文本形式来描述数字系统硬件的结构和行为的语言。世界上最流行的两种硬件描述语言是VerilogHDL和VHDL。注意,VerilogHDL是一种描述语言,它和常见的编程语言C有根本的不同。C语言,让计算机的CPU从上往下按顺序执行每一条指令,执行完…

  • BloomFilter怎么用?使用布隆过滤器来判断key是否存在?「建议收藏」

    BloomFilter怎么用?使用布隆过滤器来判断key是否存在?「建议收藏」今天跟一个同事聊了一个问题,说最近在做推荐,如何判断用户是否看过这个片段呢?想了一下,正好可以使用布隆过滤器来完成这个需求。布隆,可不是LOL的布隆。我们的这个布隆是一个叫布隆的外国人,在1970年提出的一种方案:如果判断这个key不存在,那么就一定不存在,如果key存在,那么有可能不存在。所以不存在的时候,你永远可以详细布隆。布隆过滤器是一个高空间利用率的概率性数据结构,由BurtonBloom于1970年提出,用于测试一个元素是否在集合中。新创建的布隆过滤器是一串被置为0的Bit数组(假设有m位),

  • 计算机中的虚拟ip,如何设置电脑虚拟IP[通俗易懂]

    计算机中的虚拟ip,如何设置电脑虚拟IP[通俗易懂]2020-02-29阅读(86)“全国统一价”其本意是根据企业产品的成本、销售渠道、品牌价值、利润所得出的,是正规生产企业规范销售市场,保护品牌形象的一种控制手段。在现实生活中,生产商打出的所谓“全国统一零售价”充其量只能理解成对产品的指导价。从某种程度上2020-02-29阅读(104)1.火烧新野。曹操统一了北方后,南下攻打刘备,此时刘备投靠刘表,驻扎在新野,曹操派大将夏侯惇进攻新野,这时刘备…

    2022年10月12日
  • AlertDialog.Builder setPositiveButton 点击时不关闭dialog

    AlertDialog.Builder setPositiveButton 点击时不关闭dialogAlertDialog.BuildersetPositiveButton 与 setNegativeButton点击时都会自动关闭dialog,但是文本控制不想其关闭两种方法①:LayoutInflater inflater=LayoutInflater.from(mActivity);Viewview=inflater.inflate(R.layout.

  • PHP常见面试题_php面试常问面试题

    PHP常见面试题_php面试常问面试题一.基本知识点1.1HTTP协议中几个状态码的含义:503500401403404200301302。。。200:请求成功,请求的数据随之返回。301:永久性重定向。302:暂时行重定向。401:当前请求需要用户验证。403:服务器拒绝执行请求,即没有权限。404:请求失败,请求的数据在服务器上未发现。500:服务器错误

发表回复

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

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