vue pass data from child to parent
<script> // @ is an alias to /src (in a vue-cli generated project) import Child from '@/components/Child.vue' // You also need to declare that the imported child component will be used: export default { components: { Child } } </script> /****************************************************************/ <template> <div> <!-- simplest prop - pass a string --> <Child title="This is my title"></Child> <!-- Pass an object, defined inline --> <Child :parentData="{msg: 'xxx'}"></Child> <!-- Pass an object, defined in the `data()` method --> <Child :parentData="myData"></Child> <!-- Pass a string variable, defined in `data()`. Note colon. --> <Child :stringProp="stringMessage"></Child> </div> </template> /****************************************************************/ <script> export default { name: 'Child', // To use props, they must be declared props: { parentData: Object, stringProp: String, title: String } } </script> /****************************************************************/ <!-- Parent.vue --> <template> <div> <!-- Listen for `childToParent`: the first parameter of the `$emit` method in the child component. We're also listening and reacting to an `increment` event - in this case, we increment a counter inline. --> <Child :parentData="myData" v-on:childToParent="onChildClick" v-on:increment="counter++"></PassProps> </div> </template> <script> import Child from '@/components/Child.vue' export default { data () { return { counter: 0, fromChild: '', // This value is set to the value emitted by the child } }, name: 'about', components: { Child }, methods: { // Triggered when `childToParent` event is emitted by the child. onChildClick (value) { this.fromChild = value } } } </script> /****************************************************************/ <!-- Child.vue --> <template> <div class="child"> <!-- Simplest - call `$emit()` inline--> <button type="button" name="button" v-on:click="$emit('increment')">Click me to increment!</button> <!-- set a variable then trigger a method which calls `$emit()` --> <label for="child-input">Child input: </label> <input id="child-input" type="text" name="msg" v-model="childMessage" v-on:keyup="emitToParent"> </div> </template> <script> export default { data() { return { childMessage: '' } }, name: 'Child', methods: { // Define the method that emits data to the parent as the first parameter to `$emit()`. // This is referenced in the <template> call in the parent. The second parameter is the payload. emitToParent (event) { this.$emit('childToParent', this.childMessage) } } } </script>