子组件:vuecomponents.vuevue
<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.vuethis
<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>
全局注册:code
components.jscomponent
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);
总结:想要把子组件中的值传递给父组件,ip
(1)首先,咱们要作的就是先肯定子组件和父组件,好比:it
咱们能够给子组件一个点击事件,即:console
<Button type="primary" size="large" @click="butClick">点击</Button>
(2)而后,咱们能够经过‘butClick’这个点击事件,来去调用this.$emit()方法,这个方法能够传递两个参数。import
第一个参数就是绑定在这个子组件上的一个自定义属性,第二个参数就是子组件传递过来的值。cli
butClick(){ this.$emit('popupClickData',this.numData); },
(3)这最后一步呢,就是给子组件上那个自定义的属性绑定一个方法,把子组件传递过来的值看成这个方法的参数接受过来,这样经过调用这个方法就能够获取子组件中的值了。
<popup-window @popupClickData="popupClick"></popup-window> popupClick(numData){ console.log('vvvv',numData); },