vue父子組件之間怎么傳值？下面本篇文章帶大家了解一下Vue中父組件以及子組件傳值問題，希望對(duì)大家有所幫助！
前言：在一些頁(yè)面中不單單的純純的一個(gè)vue文件，vue講究組件化開發(fā)，但是一般的肯定會(huì)產(chǎn)生交互事件，今天了解了這個(gè)傳值，特此的來記錄一下。
(資料圖片)
父組件向子組件傳值會(huì)用到：Prop，一般的我們需要在子組件中進(jìn)行相關(guān)的聲明，如下所示：
子組件為HellowWorld.vue
<script>export default { name: "HelloWorld", //接收的變量 props: { //聲明相關(guān)的類型 msg: String, count:Number, options:[] }, data(){ return{ } }, methods:{ }}</script>在父組件App.vue中
<template> <div id="app"> <!-- msg為字符串類型，count為數(shù)字，options為數(shù)組 --> <HelloWorld msg="First App" :count="count" :options="options"/> </div></template><script>//引入組件import HelloWorld from "./components/HelloWorld.vue"export default { name: "App", components: { HelloWorld }, data(){ return{ count:0, options:[], } }, methods:{ }}</script>那么在頁(yè)面上效果就是：當(dāng)然我們也可以寫一些事件來進(jìn)行動(dòng)態(tài)的數(shù)據(jù)交互，例如：
在子組件傳值時(shí)會(huì)用到$emit，值得注意的是：在子組件傳值時(shí)候的方法要與父組件中監(jiān)聽的方法名稱相同，也就是示例中的 listenToChild。 【相關(guān)推薦：vuejs視頻教程、web前端開發(fā)】
Helloworld.vue子組件：
<template> <div class="hello"> <!-- 文字信息 --> <h1 >{{ msg }}</h1> <!-- 數(shù)字信息 --> <h2>{{count}}</h2> <!-- 渲染數(shù)組信息 --> <ul> <li v-for="(item,index) in options" :key="index">{{item}}</li> </ul> <!-- 進(jìn)行傳值 --> <button @click="SendMsg">點(diǎn)擊</button> </div></template><script>export default { name: "HelloWorld", props: { msg: String, count:Number, options:[] }, data(){ return{ } }, methods:{ SendMsg(){ // listenToChild 注意 this.$emit("listenToChild",this.options) } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h3 { margin: 40px 0 0;}ul { list-style-type: none; padding: 0;}/* li { display: inline-block; margin: 0 10px;} */a { color: #42b983;}</style>App.vue父組件：
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <!-- listenToChild 為子組件傳來的方法 --> <HelloWorld msg="First App" :count="count" :options="options" @listenToChild="show"/> <button @click="Add">+</button> <button @click="restart">置零</button> <button @click="Sub">-</button> <ul> <li v-for="(item,index) in data" :key="index">{{index}}，{{item}}</li> </ul> </div></template><script>import HelloWorld from "./components/HelloWorld.vue"export default { name: "App", components: { HelloWorld }, data(){ return{ // 要傳去子組件的參數(shù) count:0, options:[], // 子組件傳來的參數(shù) data:[] } }, methods:{ Add(){ this.count=Number(this.count)+1 this.options.push("添加一次，當(dāng)前數(shù)值為："+this.count) }, Sub(){ if(this.count<=0){ this.options.push("當(dāng)前數(shù)值不能變化了"+this.count) }else{ this.count=Number(this.count)-1 this.options.pop() } }, show(data){ console.log(data) this.data=data }, restart(){ this.count=0 this.options=[] } }}</script><style>#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}button{ margin: 20px;}ul { list-style-type: none; padding: 0;}</style>效果：
（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）
以上就是一文淺析Vue中父子組件間傳值問題的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
營(yíng)業(yè)執(zhí)照公示信息