子组件:vuecomponents.vue
<template> <div> <div> <button @click="butClick">密密麻麻</button> </div> </div> </template> <script> export default { data(){ return { num: { a: 'oo', b: 'pp', c: 'vv' } } }, methods: { butClick(){ this.$emit('handleClickData',this.num); } } } </script> <style> </style>
父组件:prents.vue
<template> <div> <vue-components @handleClickData="handleClick"></vue-components> </div> </template> <script> export default { data() { return { } }, methods: { handleClick(num){ console.log('xxxx:',num); console.log('xxxx:',num.a); console.log('xxxx:',num.b); console.log('xxxx:',num.c); } }, created(){ } } </script> <style> </style>
全局注册:
components.js
import Vue from 'vue'; import vueComponents from './components/vuecomponents.vue'; export default (Vue) => { Vue.component('vue-components',vueComponents); }
main.js
import Components from '@/public-components/components.js'; Vue.use(Components);
总结:想要把子组件中的值传递给父组件,
(1)首先,我们要做的就是先确定子组件和父组件,比如:
我们可以给子组件一个点击事件,即:
<Button type="primary" size="large" @click="butClick">点击</Button>
(2)然后,我们可以通过‘butClick’这个点击事件,来去调用this.$emit()方法,这个方法可以传递两个参数。
第一个参数就是绑定在这个子组件上的一个自定义属性,第二个参数就是子组件传递过来的值。
butClick(){ this.$emit('popupClickData',this.numData); },
(3)这最后一步呢,就是给子组件上那个自定义的属性绑定一个方法,把子组件传递过来的值当作这个方法的参数接受过来,这样通过调用这个方法就可以获取子组件中的值了。
<popup-window @popupClickData="popupClick"></popup-window> popupClick(numData){ console.log('vvvv',numData); },