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;
}

总结

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

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页