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

總結

  紙上得來終覺淺，覺知此事要躬行！