Vue子组件向父组件传值(详讲)

前言

  之前分享过vue的生命周期及组件之间的通信,但是理论与实践还是有很大的区别的,所以今天来实践一波子组件向父组件传值的具体过程。

过程

  1.首先建立子组件:

  1)在components下面建立文件夹getip,在文件夹下建立.vue文件getip.vue,建立.js文件index.js

  2)index.js文件下的代码:

import getip from './getip.vue'
export default getip

  3)getip.vue作为子组件,向父组件传值的代码

vm.$emit("maincard", vm.maincard);

  2.父组件引用

  1)在需要引用的界面中导入组件:

import getip from "../../components/getip/getip.vue";

  2)插入组件:

export default {
  components: { getip }
}

  3)界面布局

<div>
	 <getip @maincard="maincard"></getip>
</div>

  4)在方法中添加

maincard:function(data) {
      var vm = this;
      vm.maincardid = data;
}

总结

  纸上得来终觉浅,觉知此事要躬行!

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值