vue如何實(shí)現(xiàn)子組件向父組件進(jìn)行傳值

這篇文章主要為大家展示了“vue如何實(shí)現(xiàn)子組件向父組件進(jìn)行傳值”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue如何實(shí)現(xiàn)子組件向父組件進(jìn)行傳值”這篇文章吧。

子組件向父組件進(jìn)行傳值：

父組件內(nèi)設(shè)置要傳的數(shù)據(jù)『data(){ id: value}』

接下來我們通過一個(gè)例子，說明子組件如何向父組件傳遞值：當(dāng)我們點(diǎn)擊“Vue.js Demo”后，子組件向父組件傳遞值，文字由原來的“傳遞的是一個(gè)值”變成“子向父組件傳值”，實(shí)現(xiàn)子組件向父組件值的傳遞。

// 子組件
<template>
  <header>
    <h2 @click="changeTitle">{{title}}</h2>//綁定一個(gè)點(diǎn)擊事件
  </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:"傳遞的是一個(gè)值"
    }
  },
  methods:{
    updateTitle(e){   //聲明這個(gè)函數(shù)
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

以上是“vue如何實(shí)現(xiàn)子組件向父組件進(jìn)行傳值”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！