溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“Vue中父子組件間怎么通信的”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“Vue中父子組件間怎么通信的”吧!
什么是父子組件？
在一個組件中引入另一個組件，被引入的就叫做子組件，因為vue的模塊化，會把有公共的部分單獨抽成一個模塊，不會把所有頁面內(nèi)容寫在一個vue文件下，因為模塊化的原因，避免不了兩個模塊之間的通信問題，這時候就有了模塊（組件）之間的數(shù)據(jù)傳遞問題。
在vue中經(jīng)常會一個組件經(jīng)常會用到另一個組件的數(shù)據(jù)或者方法，這時候就有了父子組件之間的通信問題
1.先看代碼，講解在下面
<body>
//父組件
<div id="app">
<cpn3 :ctitle="title"></cpn3>
</div>
//子組件
<template id="cpn3">
<div>
<h2>{{ctitle}}</h2>
<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是一個函數(shù)，必須要返回一個對象，變量寫在返回對象里
props: {
ctitle: {
type: String,
default () {
return {}
}
}
}
})
//父組件
const app = new Vue({
el: "#app",
data: {
title: 'orange'
},
methods: {},
})
</script>
</body>講解：
1.先寫出基本的模板分離組件
2.在子組件中加入props屬性，用對象方式，，在props里面可以寫你需要傳的參數(shù)，參數(shù)也用對象方式，代碼比較清晰，
//子組件
Vue.component("cpn3", {
template: "#cpn3",
// 組件里的data是一個函數(shù)，必須要返回一個對象，變量寫在返回對象里
props: {
ctitle: {
//參數(shù)也使用對象形式，type傳類型 default函數(shù)，是在找不到參數(shù)時返回一個值顯示
type: String,
default () {
return {}
}
}
}
})2.然后在父組件中加入需要的屬性
//父組件
const app = new Vue({
el: "#app",
data: {
//這里的title就是要傳入子組件的屬性 在父組件中定義
title: 'orange'
},
methods: {},
})3.在父組件中綁定兩個參數(shù)
<div id="app"> //可以理解為將父組件中title 賦值給 ctitle，這樣子組件就可以使用父組件的data屬性了 <cpn3 :ctitle="title"></cpn3> </div>
4.最后在在子組件中要使用子組件定義的屬性名
//子組件
<template id="cpn3">
<div>
//這里的屬性名為ctitle
<h2>{{ctitle}}</h2>
</div>
</template>1.子傳父的意思就是，，子組件內(nèi)容傳給父組件，，使父組件可以隨時使用子組件傳來的數(shù)據(jù)，使用方法為：自定義函數(shù)
1、首先我們來做一個仿淘寶側(cè)邊欄商品，點擊或者鼠標(biāo)移動到上面出現(xiàn)內(nèi)容商品案例
2、以上面這個圖片為例，我們來講一下組件傳遞的子傳父
2.1我們將子組件和父組件分開先，挨個講 先來看看子組件代碼
<!-- 子組件 -->
<template id="cpn">
<div>
<h2>{{ctitle}}</h2>
<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,
//找不到數(shù)據(jù)時
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>講解：子組件就是寫出一個組件（html）包裝起來，并且可以隨時使用， 也就相當(dāng)于html一樣的，只是打包起來而已（這么理解應(yīng)該沒什么問題）
1.子組件和vue一樣有data，methods，這屬性 所以在data中寫一個數(shù)組，然后用v-for的方式遍歷生成按鈕 和正常寫法沒什么差別，然后寫個函數(shù)，綁定點擊事件，并且將item，也就是數(shù)組傳入的對象傳入函數(shù)，
<button v-for="item in list" @click="goodsclick(item)">{{item.name}}</button>2.然后最重要，最關(guān)鍵的一步來了，就是在你綁定的點擊事件函數(shù)中，發(fā)射一個自定義函數(shù)給父組件，就是發(fā)送給父組件
methods: {
// 自定義事件
goodsclick(item) {
//itemclick就是自定義函數(shù)，并且將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>講解一下：你寫好了子組件就要調(diào)用，調(diào)用就是你的組件名作為標(biāo)簽即可，，這里是
<cpn :ctitle="title" @itemclick="cpnclick"></cpn>
在父組件中寫一個函數(shù)然后在里面綁定從子組件傳過來的自定義事件，這樣就成功綁定子組件，這樣就完成子組件傳數(shù)據(jù)到父組件了
到此，相信大家對“Vue中父子組件間怎么通信的”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼