vue中emit的用法

vue中子传父参数的方法共有两种:
1、子组件通过emit传输
2、通过自定义组件传输

下列优先讲解下其emit的传输方法
在父组件中

(1)首先需要定义其改变的函数,一般emit多用于点击事件,例如我目前所在地的名称是北京,我想通过子组件的点击,导致我的名称发生其改变
(2)定义其data属性存储器数据

<template>
  <div class="hello">
    <h2>我是父组件,我需要建立一些参数</h2>
    <h3>我所在地的名称是:{{ msg }}</h3>
    <span><mHome @showCityName="updateCityName" /></span>
  </div>
</template>

<script>
import mHome from "@/views/Home.vue";
export default {
  components: {
    mHome,
  },
  data() {
    return {
      msg: "北京",
    };
  },
  methods: {
    updateCityName(data) {
      this.msg = data.msg;
    },
  },
};
</script>

在子组件中

(1)定义其点击方法,并且传入其需要改变的值,例如我所改变的是城市为武汉
(2)定义emit函数,并且传输的showCityName需与父组件的点击事件名称保持一致才行
(3)通过data进行传参处理即可

<template>
  <div class="home">
    <h1>我是子组件</h1>
    <h2 @click="change('武汉')">测试其emit组件</h2>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  methods: {
    change(val) {
      let data = {
        msg: val,
      };
      this.$emit("showCityName", data);
    },
  },
};
</script>

效果图

在这里插入图片描述
总结:
(1)需要在其子组件中定义 e m i t 事 件 ( 2 ) emit事件 (2) emit2emit的传递子组件和父组件的函数名需要保持一致

  • 18
    点赞
  • 57
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值