How to implement the child component to pass the value to the parent component by vue

This article mainly shows you the "vue how to achieve child components to the parent component to pass values", the content is easy to understand, clear, hope to help you solve the doubt, the following let Xiaobian lead you to study and learn "vue how to achieve child components to the parent component to pass values" this article.

The child component passes values to the parent component:

Set the data to be passed in the parent component "data () {id: value}"

Next, we use an example to illustrate how the child component passes the value to the parent component: when we click "Vue.js Demo", the child component passes the value to the parent component, and the text changes from "passing a value" to "the child passes the value to the parent component" to realize the transfer of the value from the child component to the parent component.

/ / child component {{title}} / / bind a click event export default {name: 'app-header', data () {return {title: "Vue.js Demo"}}, methods: {changeTitle () {this.$emit ("titleChanged", "child passes value to parent component") / / Custom event passing value "child passes value to parent component"}} / / parent component / / consistent with child component titleChanged custom event / / updateTitle ($event) accepts the text {{title}} import Header from ". / components/Header" export default {name: 'App', data () {return {title: "passing a value}} Methods: {updateTitle (e) {/ / declare this function this.title = e }, components: {"app-header": Header,}} these are all the contents of the article "how to implement a child component to pass values to a parent component by vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!