本書目錄：點擊進入
一、組件之間為什么要做通信
二、組件之間通信方式
2.1、父傳子：由傳遞屬性實現(xiàn)
stage 1：申明 （即定義）
stage 2：注冊
stage 3：使用
【示例】：父組件將?title 和 count 傳遞給子組件?（普通數(shù)據(jù) 和 響應(yīng)式數(shù)據(jù)的傳遞）
＞??代碼?
＞??效果
2.2、子傳父：由自定義事件實現(xiàn)?
stage 1：申明 （即 父組件：定義方法 + 子組件：調(diào)用方法）
stage 2：注冊
stage 3：使用
?【示例】：子組件將?data 傳遞給父組件?
＞??代碼?
＞??效果
一、組件之間為什么要做通信
- 主要是為了讓組件滿足不同的需求
如：
- 評分組件顯示：由5顆星變成10顆星
- 按鈕組件顯示：紅色刪除，比較危險
二、組件之間通信方式
vue中有4-5種，本節(jié)介紹最常見的?
- 父子通信
2.1、父傳子：由傳遞屬性實現(xiàn)
stage 1：申明 （即定義）
stage 2：注冊
stage 3：使用
【示例】：父組件將?title 和 count 傳遞給子組件?（普通數(shù)據(jù) 和 響應(yīng)式數(shù)據(jù)的傳遞）
-
普通數(shù)據(jù)：title="hello world" ，無法響應(yīng)式修改數(shù)據(jù)
-
響應(yīng)式數(shù)據(jù) :count="count"
＞??代碼?
<body>
<div id="app">
<my-head title="hello world" :count="count"></my-head>
</div>
<script>
let app = Vue.createApp({
data(){
return {
count: 10,
title: "hello vue3"
}
},
mounted(){
setTimeout(()=>{
this.title = "hello vue3";
this.count = 20;
}, 2000)
}
})
app.component('MyHead', {
props: {
'count': {
type: Number
}
},
props: ['title', 'count'],
template: `
<header>
<div>{{ title }},{{ count }}</div>
<h2>logo</h2>
<ul>
<li>首頁</li>
<li>視頻</li>
<li>音樂</li>
</ul>
</header>
`
});
let vm = app.mount('#app');
</script>
</body>＞??效果
2.2、子傳父：由自定義事件實現(xiàn)?
stage 1：申明 （即 父組件：定義方法 + 子組件：調(diào)用方法）
stage 2：注冊
stage 3：使用
文章來源：http://www.zghlxwxcb.cn/news/detail-798457.html
?【示例】：子組件將?data 傳遞給父組件?
＞??代碼?
<body>
<div id="app">
<div>{{message}}</div>
<my-head @custom-click="handleClick"></my-head>
</div>
<script>
let app = Vue.createApp({
data(){
return {
message: "app Data"
}
},
methods: {
handleClick(data){
// console.log(data);
this.message = data;
}
}
})
app.component('MyHead', {
emits: ['custom-click'],
template: `
<header>
<h2>logo</h2>
<ul>
<li>首頁</li>
<li>視頻</li>
<li>音樂</li>
</ul>
</header>
`,
mounted(){
setTimeout(()=>{
this.$emit('custom-click', 'MyHead Data')
}, 2000)
}
});
let vm = app.mount('#app');
</script>
</body>＞??效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-798457.html
到了這里，關(guān)于【Vue3】3-3 : 組件之間是如何進行互相通信的的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
