本书目录:点击进入
一、组件之间为什么要做通信
二、组件之间通信方式
2.1、父传子:由传递属性实现
stage 1:申明 (即定义)
stage 2:注册
stage 3:使用
【示例】:父组件将 title 和 count 传递给子组件 (普通数据 和 响应式数据的传递)
> 代码
> 效果
2.2、子传父:由自定义事件实现
stage 1:申明 (即 父组件:定义方法 + 子组件:调用方法)
stage 2:注册
stage 3:使用
【示例】:子组件将 data 传递给父组件
> 代码
> 效果
一、组件之间为什么要做通信
- 主要是为了让组件满足不同的需求
如:
- 评分组件显示:由5颗星变成10颗星
- 按钮组件显示:红色删除,比较危险
二、组件之间通信方式
vue中有4-5种,本节介绍最常见的
- 父子通信
2.1、父传子:由传递属性实现
stage 1:申明 (即定义)
stage 2:注册
stage 3:使用
【示例】:父组件将 title 和 count 传递给子组件 (普通数据 和 响应式数据的传递)
-
普通数据:title="hello world" ,无法响应式修改数据
-
响应式数据 :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、子传父:由自定义事件实现
stage 1:申明 (即 父组件:定义方法 + 子组件:调用方法)
stage 2:注册
stage 3:使用
文章来源:https://www.toymoban.com/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>
> 效果
文章来源地址https://www.toymoban.com/news/detail-798457.html
到了这里,关于【Vue3】3-3 : 组件之间是如何进行互相通信的的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!