Vue中父子元件間怎麼通訊？以下這篇文章就來帶大家了解Vue父子元件通信，介紹一下父向子傳值和子向父傳值的方法，希望對大家有所幫助。
什麼是父子元件？
在一個元件中引入另一個元件，被引入的就叫做子元件，因為vue的模組化，會把有公共的部分單獨抽成一個模組，不會把所有頁面內容寫在一個vue檔案下，因為模組化的原因，避免不了兩個模組之間的通訊問題，這時候就有了模組（組件）之間的資料傳遞問題。 【相關推薦：《vue.js教學》】
在vue中常會一個元件常會用到另一個元件的資料或者方法，這時候就有了父子元件之間的通訊問題
#1.先看程式碼，講解在下面
<body>
//父组件
<div id="app">
<cpn3 :ctitle="title"></cpn3>
</div>
//子组件
<template id="cpn3">
<div>
<h1>{{ctitle}}</h1>
<p>orange</p>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//子组件
Vue.component("cpn3", {
template: "#cpn3",
// 组件里的data是一个函数，必须要返回一个对象，变量写在返回对象里
props: {
ctitle: {
type: String,
default () {
return {}
}
}
}
})
//父组件
const app = new Vue({
el: "#app",
data: {
title: 'orange'
},
methods: {},
})
</script>
</body>講解：
1.先寫出基本的模板分離元件
2.在子元件中加入props屬性，用物件方式，，在props裡面可以寫你需要傳遞的參數，參數也用物件方式，程式碼比較清晰，###
//子组件
Vue.component("cpn3", {
template: "#cpn3",
// 组件里的data是一个函数，必须要返回一个对象，变量写在返回对象里
props: {
ctitle: {
//参数也使用对象形式，type传类型 default函数，是在找不到参数时返回一个值显示
type: String,
default () {
return {}
}
}
}
})//父组件
const app = new Vue({
el: "#app",
data: {
//这里的title就是要传入子组件的属性 在父组件中定义
title: 'orange'
},
methods: {},
}) <div id="app">
//可以理解为将父组件中title 赋值给 ctitle，这样子组件就可以使用父组件的data属性了
<cpn3 :ctitle="title"></cpn3>
</div>//子组件
<template id="cpn3">
<div>
//这里的属性名为ctitle
<h1>{{ctitle}}</h1>
</div>
</template>1.子傳父的意思就是，，子元件內容傳給父元件，，使父元件可以隨時使用子元件傳來的數據，使用方法為：自訂函數
1、首先我們來做一個仿淘寶側邊欄商品，點擊或滑鼠移動到上面這個圖片為例，我們來講一下元件傳遞的子傳父#2.1我們將子元件和父元件分開先，挨個講 先來看看子元件程式碼
<!-- 子组件 -->
<template id="cpn">
<div>
<h1>{{ctitle}}</h1>
<button v-for="item in list" @click="goodsclick(item)">{{item.name}}</button>
</div>
</template>
<script>
Vue.component("cpn", {
template: '#cpn',
//父传子 props
props: {
ctitle: {
type: String,
//找不到数据时
default () {
return {}
}
}
},
data() {
return {
list: [{
id: 'phone',
name: '手机'
}, {
id: 'tv',
name: '电视'
}, {
id: 'p',
name: '家电'
}, {
id: 'computer',
name: '电脑'
}, ]
}
},
//子传父 自定义事件
methods: {
// 自定义事件
goodsclick(item) {
this.$emit('itemclick', item)
}
}
})
</script>#1.子元件和vue一樣有data，methods，這屬性 所以在data中寫一個數組，然後用v-for的方式遍歷產生按鈕 和正常寫法沒什麼差別，然後寫個函數，綁定點擊事件，並且將item，也就是數組傳入的對象傳入函數，
<button v-for="item in list" @click="goodsclick(item)">{{item.name}}</button>2.然後最重要，最關鍵的一步來了，就是在你綁定的點擊事件函數中，發射一個自訂函數給父元件，就是發送給父元件methods: {
// 自定义事件
goodsclick(item) {
//itemclick就是自定义函数，并且将item也传过去给父组件
this.$emit('itemclick', item)
}
}登入後複製
2、接下來講講父元件怎麼接收子元件傳來的自訂事件
<!-- 父组件 -->
<div id="app">
<cpn :ctitle="title" @itemclick="cpnclick"></cpn>
</div>
<script>
//父组件
const app = new Vue({
el: "#app",
data: {
title: "title",
},
methods: {
cpnclick(item) {
console.log("cpnclick", item);
}
}
})
</script>講解一下：你寫好了子元件就要調用，調用就是你的元件名稱作為標籤即可，，這裡是
<cpn :ctitle="title" @itemclick="cpnclick"></cpn>
在父元件中寫一個函數然後在裡面綁定從子元件傳過來的自定義事件，這樣就成功綁定子元件，這樣就完成子元件傳資料到父元件了本章完
更多程式相關知識，請造訪：
程式設計入門！ ！
以上是Vue中父子組件間怎麼通訊？聊聊父傳子和子傳父的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
