vue如何实现子组件向父组件进行传值

这篇文章主要为大家展示了“vue如何实现子组件向父组件进行传值”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何实现子组件向父组件进行传值”这篇文章吧。

子组件向父组件进行传值：

父组件内设置要传的数据『data(){ id: value}』

接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。

// 子组件<template>  <header>    <h2 @click="changeTitle">{{title}}</h2>//绑定一个点击事件  </header></template><script>export default {  name: 'app-header',  data() {    return {      title:"Vue.js Demo"    }  },  methods:{    changeTitle() {      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”    }  }}</script>

// 父组件<template>  <div id="app">    <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致   // updateTitle($event)接受传递过来的文字    <h3>{{title}}</h3>  </div></template><script>import Header from "./components/Header"export default {  name: 'App',  data(){    return{      title:"传递的是一个值"    }  },  methods:{    updateTitle(e){   //声明这个函数      this.title = e;    }  },  components:{   "app-header":Header,  }}</script>

以上是“vue如何实现子组件向父组件进行传值”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！