组件之间的关系
在项目开发中，组件之间的最常见的关系分为两种
- 父子关系
- 兄弟关系
父->子共享数据
父组件向子组件共享数据需要使用自定义属性。
父子组件之间的数据共享
父组件：
<template>
<div id="app">
<h1>app根组件</h1>
<left :msg="message" :user="user"></left>
</div>
</template>
<script>
import left from "./components/left.vue"
export default{
data(){
return {
message:"hello everyone",
user:{
name:"张三",
age:18
}
}
},
components:{
left
}
}
</script>
<style>
#app{
width: 100%;
height: 200px;
background-color: aqua;
}
</style>子组件：
<template>
<div>
<p>msg的值是:{{msg}}</p>
<p >user的值是:{{user}}</p>
<!-- 打开控制台vue看点击后的变化 -->
<!-- 点击修改终端报错，修改的是复制了一份的值，跟原来的值无关，也就是父组件没变化
但不建议这样用
-->
<button @click="msg='aaa'">修改msg</button>
<!-- 终端报错 效果同上-->
<button @click="user={sex:'男'}">修改user</button>
<!-- 父组件，子组件都发生了变化 -->
<button @click="user.name='李四'">修改user里的值</button>
<!-- 以上方法不可取，要保证props是只读的，要想修改最好转存一份 -->
</div>
</template>
<script>
export default {
props:["msg","user"],
components:{
}
}
</script>
<style scoped>
p{color:red}
/deep/ h5{
color:orange;
}
</style>子->父共享数据
子组件向父组件共享数据使用自定义事件。
子组件：
<template>
<div>
<!-- <p>msg的值是:{{msg}}</p> -->
<!-- <p>user的值是:{{user}}</p> -->
<h3>{{num}}</h3>
<button @click="add">加一</button>
</div>
</template>
<script>
export default {
data(){
return{
num:0
}
},
methods:{
add(){
// 让子组件的num值自增加1
this.num+=1
// 把自增的结果，传给父组件 自定义属性名，值
this.$emit("numchange",this.num)
}
},
}
</script>
<style lang="less">
p{color:red}
/deep/ h5{
color:orange;
}
</style>父组件：
<template>
<div id="app">
<h1 >app根组件{{numFromSon}}</h1>
<left @numchange="getnum"></left>
</div>
</template>
<script>
import left from "./components/left.vue"
export default{
data(){
return {
message:"hello everyone",
user: {name: "张三",age: 18},
numFromSon:0
}
},methods:{
// 获取子组件传递过来的数据
getnum(val){
this.numFromSon=val
}
},
components:{
left
}
}
</script>
<style>
#app{
width: 100%;
height: 200px;
background-color: aqua;
}
</style>兄弟组件之间的数据共享
在vue2.x中，兄弟组件之间数据共享的方案是EventBus。之后根组件调用两兄弟标签，通过跟组件显示效果。
EventBus的使用步骤
- 创建eventBus.js模块，并向外共享一个Vue的实例对象。
- 在数据发送方，调用bus.$emit(“事件名称”，要发送的数据)方法触发自定义事件。
- 在数据接收方，调用bus.$on(“事件名称”，事件处理函数)方法注册一个自定义事件。
发送方：
<template>
<div>
<button @click="send">把文字发送给兄弟组件</button>
</div>
</template>
<script>
import bus from "./eventBus.js"
export default {
data(){
return{
text:"我有一剑,可破世间万物"
}
},
methods:{
send(){
// 通过eventBus发送数据
bus.$emit("share",this.text)
}
},
}
</script>
<style lang="less">
p{color:red}
/deep/ h5{
color:orange;
}
</style>EventBus：
import Vue from "vue" // 向外共享Vue的实例对象 export default new Vue()
接收方：
<template>
<div>
<p>{{textFromLeft}}</p>
</div>
</template>
<script>
// 导入eventBus模块
import bus from "./eventBus.js"
export default {
data(){
return{
textFromLeft:""
}
},
created(){
// 为bus绑定自定义事件
bus.$on("share",(val)=>{
this. textFromLeft=val
})
},
components:{
}
}
</script>
<style>
div{
width: 50%;
float: left;
}
h5{
color: blueviolet;
}
</style>>效果：
原文地址：https://blog.csdn.net/qq_72760247/article/details/127404230