前言
之前分享过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;
}
总结
纸上得来终觉浅,觉知此事要躬行!