Yo uso vue versión 2
Mi componente principal como este:
<template> ... <page-heading :searchChange="searchChange" ></page-heading> ... </template> <script> import PageHeading from "@/views/app/report/PageHeading"; export default { components: { "page-heading": PageHeading }, methods: { searchChange(val) { console.log('test search') console.log(val) console.log(this.selectedDate) } } }; </script>Mi componente hijo como este:
<template> ... <b-form-group> <Datepicker range v-model="selectedDate" /> </b-form-group> <b-button type="submit" @click="searchChange(val)">Search</b-button> ... </template> <script> import 'vue-datepicker-ui/lib/vuedatepickerui.css'; import VueDatepickerUi from 'vue-datepicker-ui'; export default { components: { Datepicker: VueDatepickerUi }, props: [ "searchChange", ], data() { return { selectedDate: [ new Date(), new Date(new Date().getTime() + 9 * 24 * 60 * 60 * 1000)] }; }, }; </script>Cuando haga clic en el botón de búsqueda, quiero obtener la fecha seleccionada del componente secundario. Entonces, en el componente principal, puedo leer la fecha seleccionada
¿Cómo puedo hacer eso?
Por favor ayuda. Gracias
Puede usar el método $emit para el elemento principal con la fecha selectedDate como valor en el componente secundario:
<template> ... <b-form-group> <Datepicker range v-model="selectedDate" /> </b-form-group> <b-button type="submit" @click="search">Search</b-button> ... </template> <script> import 'vue-datepicker-ui/lib/vuedatepickerui.css'; import VueDatepickerUi from 'vue-datepicker-ui'; export default { components: { Datepicker: VueDatepickerUi }, props: [ "search", ], data() { return { selectedDate: [ new Date(), new Date(new Date().getTime() + 9 * 24 * 60 * 60 * 1000)] }; }, methods:{ search(){ this.$emit('on-search',this.selectedDate); } } }; </script> en padre, agregue un controlador para el evento on-search :
<template> ... <page-heading @on-search="search" ></page-heading> ... </template> <script> import PageHeading from "@/views/app/report/PageHeading"; export default { components: { "page-heading": PageHeading }, methods: { search(val) { console.log('test search') console.log(val) } } }; </script>o podría usar un enlace bidireccional como en esta respuesta