VEU中的组件之间的数据传递
组价三部曲
- 创建组件。
- 注册组件。
- 使用组件。
组件之间的数据传递的方式
1. 父传子 ：通过props属性传递
2. 子传父 通过$emit属性，用来发布自定义事件
3. 兄弟组件之间的传递
1.父传子
- 把父组件的数据以动态属性的方式放在当前子组件的行间属性上
- 在子组件中用props接收到这个属性 （数组、对象）
- 在子组件取值使用动态的属性名取值
<body>
<div id="app">
<child :c="msg"></child>
<child :c="num" :b="obj"></child>
<child :b="obj"></child>
</div>
<script src="vue.js"></script>
<script>
let child={
data(){
return {
//msg:"苏大强" :如果自己身上也有msg这个属性，会去取父组件上的msg
}
},
props:["c","b"],
template:"{{c}}{{b}}"
}
let vm=new Vue({
el:"#app",
data:{
msg:"春光郑好",
num:"豫战豫勇",
obj:"中国加油"
},
components:{
child
}
})
</script>
</body>
2.子传父
- 在VUE中子组件不能直接修改父组件的数据，想更改数据需要通过$emit属性，用来发布自定义事件，进行修改。
- 自定义的名称必须小写，@changemoney=
<body>
<div id="app">
父亲： {{money}}
<!-- // 自定义事件 -->
<son :m="money" @changemoney="fn" :b="fn"></son>
</div>
<script src="vue.js"></script>
<script>
let son = {
data(){
return {}
},
props:["m","b"],// props接收到的属性也会放在组件实例上一份
methods:{
add(){
// this==> 组件的实例
this.$emit("changemoney",1080);//这里面的1080传给fn中的val
// this.b();
}
},
template:"儿子：{{m}}"
}
let vm = new Vue({
el:"#app",
data:{
money:888
},
methods:{
fn(val){
this.money=val;
}
},
components:{
son
}
});
</script>
</body>
子传父中的sync修饰符
代码中的两个方法是上面子传父的语法糖，也就是简写。写了这两个后父组件的methods中的方法就可以不写了。
<body>
<div id="app">
父亲： {{money}}
<!-- $event接收的是$emit的第二个参数 -->
<!-- <son :m="money" @update:m="money=$event"></son> -->
<son :m.sync="money" :v.sync="val"></son>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 语法糖
let son = {
data(){
return {}
},
props:["m","v"],
methods:{
add(){
this.$emit("update:m",2000);
this.$emit("update:v",8899);
}
},
template:"儿子：{{m}}{{v}}"
}
new Vue({
el:"#app",
data:{
money:888,
val:1000
},
methods:{
},
components:{
son
}
});
</script>
</body>
3.兄弟之间的数据传递 （eventBus）
兄弟之间的组件数据传递：eventBus;
$on : 订阅
$emit : 发布；轮询对应的事件池，让其中的方法执行
let eventBus = new Vue;// 这就是一个容器;联系了兄弟之间的纽带
下面写一个简单的案例，点弟弟组件让哥哥组件变绿，点弟弟让哥哥变红
<body>
<div id="app">
<bro1></bro1>
<bro2></bro2>
</div>
<script src="../VUE上课/vue.js"></script>
<script>
// 兄弟之间的组件数据传递：eventBus;
// $on : 订阅
// $emit : 发布；轮询对应的事件池，让其中的方法执行
let eventBus = new Vue;// 这就是一个容器;联系了兄弟之间的纽带
let bro1 = {
data(){
return {
color:"红色"
}
},
created(){//这里面可以那倒methods中的方法，但是不能拿到真实的DOM
eventBus.$on("changeGreen",this.changeGreen)
},
methods:{
fn1(){
eventBus.$emit('changeRed');
},
changeGreen(){
this.color="绿色"
}
},
template:"{{color}}"
};
let bro2 = {
data(){
return {
color:"绿色"
}
},
created(){
eventBus.$on("changeRed",this.changeRed)
},
methods:{
changeRed(){
this.color="红色";
},
fn2(){
eventBus.$emit('changeGreen');
}
},
template:"{{color}}"
};
let vm = new Vue({
el:"#app",
data:{
},
components:{
bro1,
bro2
}
})
</script>
</body>
4. Vuex 适用于 父子、隔代、兄弟组件通信
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
- Vuex 的状态存储是响应式的。当 Vue 组件从store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
- 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
这里面详细解释了一下什么是VUEX可以参考一下
https://blog.csdn.net/Cool_so_cool/article/details/105467214