溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“Vue中父子組件間怎么通信的”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue中父子組件間怎么通信的”吧!
什么是父子組件？
在一個組件中引入另一個組件，被引入的就叫做子組件，因為vue的模塊化，會把有公共的部分單獨抽成一個模塊，不會把所有頁面內容寫在一個vue文件下，因為模塊化的原因，避免不了兩個模塊之間的通信問題，這時候就有了模塊（組件）之間的數據傳遞問題。
在vue中經常會一個組件經常會用到另一個組件的數據或者方法，這時候就有了父子組件之間的通信問題
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是一個函數，必須要返回一個對象，變量寫在返回對象里
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 {}
}
}
}
})2.然后在父組件中加入需要的屬性
//父組件
const app = new Vue({
el: "#app",
data: {
//這里的title就是要傳入子組件的屬性 在父組件中定義
title: 'orange'
},
methods: {},
})3.在父組件中綁定兩個參數
<div id="app"> //可以理解為將父組件中title 賦值給 ctitle，這樣子組件就可以使用父組件的data屬性了 <cpn3 :ctitle="title"></cpn3> </div>
4.最后在在子組件中要使用子組件定義的屬性名
//子組件
<template id="cpn3">
<div>
//這里的屬性名為ctitle
<h2>{{ctitle}}</h2>
</div>
</template>1.子傳父的意思就是，，子組件內容傳給父組件，，使父組件可以隨時使用子組件傳來的數據，使用方法為：自定義函數
1、首先我們來做一個仿淘寶側邊欄商品，點擊或者鼠標移動到上面出現內容商品案例
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,
//找不到數據時
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）包裝起來，并且可以隨時使用， 也就相當于html一樣的，只是打包起來而已（這么理解應該沒什么問題）
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中父子組件間怎么通信的”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
