详解vue中数据传递（父传子、子传父、兄弟之间以及vuex）代码附上
VUE中的数据传递是单向的；1. 父传子2. 子传父3. 兄弟之间传递1.父传子（props）如何让子组件获取到父组件中的数据？1. 把父组件的数据以动态属性的方式当在子组件的行间属性上；2. 在子组件中用props这个属性接收，（对象、数组）3. 在子组件中使用动态的属性名保持一致；<body><div id="app"><!-...
VUE中的数据传递是
单向的；
1. 父传子
2. 子传父
3. 兄弟之间传递
1.父传子（props）
如何让子组件获取到父组件中的数据？
1. 把父组件的数据以动态属性的方式当在子组件的行间属性上；
2. 在子组件中用props这个属性接收，（对象、数组）
3. 在子组件中使用动态的属性名保持一致；
<body>
<div id="app">
<!--普通的行间属性的属性值就是一个字符串-->
<!--动态属性取父组件中的数据-->
<child :m="msg" :t="hh"></child>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let child = {
data(){
return {
num:100,
}
},
props:["m","t"],// props中放的是动态属性的属性名
template:"<div>{{m}}{{t}}</div>"// 和props对应；
}
let vm = new Vue({
el:"#app",
data:{
msg:"好好学习",
hh:"天天向上"
},
components:{
child
}
});
</script>
</body>
2.子传父（发布订阅）
(1)、在vue的实例
methods中写方法
(2)、在子组件标签的行间属性中订阅自定义方法@自定义事件=“方法名”
(3)、在子组件的方法中通过$emit来发布自定义事件
(4)、在子组件的template中绑定事件(比如click)
<body>
<div id="app">
{{money}}
<!--订阅自定义事件的方法-->
<son :m="money" @changemoney="change"></son>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 在vue中，不能直接修改父组件中的数据；
let son ={
data(){
return {}
},
props:["m"],// props接收的数据会放到当前的组件实例上；
methods:{
f(){
// $emit : 发布自定义事件
this.$emit("changemoney",3000);
}
},
template:"<div>{{m}}<button @click='f'>多要点压岁钱</button></div>"
};
let vm = new Vue({
el:"#app",
data:{
money:200
},
methods:{
change(val){// 可以接收参数，$emit的第二个参数会传给change的第一个参数；
this.money=val;
}
},
components:{
son
}
})
</script>
</body>
3.兄弟之间传递(eventBus)
(1)、引入第三方
new vue定义为eventBus
(2)、在组件中created中订阅方法eventBus.$on("自定义事件名",methods中的方法名)
(3)、在另一个兄弟组件中的methods中写函数，在函数中发布eventBus订阅的方法eventBus.$emit("自定义事件名")
(4)、在组件的template中绑定事件(比如click)
<body>
<div id="app">
<bro1></bro1>
<bro2></bro2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 兄弟之间组件数据传递
let eventBus = new Vue;// 相当于第三方；
let bro1 = {
data(){
return {
color:"红色"
}
},
created(){
// 把自己实例上的方法订阅了eventBus这个实例的changeGreen这个自定义的事件上
eventBus.$on("changeGreen",this.changeGreen)
},
methods:{
changeGreen(){
this.color="绿色"
},
fn2(){
eventBus.$emit("changeRed")
}
},
template:"<div>{{color}}<button @click='fn2'>变红</button></div>"
};
let bro2 = {
data(){
return {
color:"绿色"
}
},
created(){
eventBus.$on("changeRed",this.changeRed)
},
methods:{
changeRed(){
this.color="红色"
},
fn1(){
// 点击button时，触发eventBus的changeGreen 这个订阅的事件；那么就会执行哥哥组件的changeGreen 方法；
eventBus.$emit("changeGreen")
}
},
template:"<div>{{color}}<button @click='fn1'>变绿</button></div>"
};
let vm = new Vue({
el:"#app",
data:{
},
components:{
bro1,
bro2
}
})
</script>
</body>
vuex
如果项目组件比较少，不需要使用vuex;如果项目数据复杂，组件比较多，建议使用vuex;
vuex:是一个专门为vue.js设计的状态管理模式，采用了集中存储和管理所有的组件的状态；把所有组件共享的数据抽离成一个store；方便更改或管理；
（1）. vueX 数据是响应式的；当store中的数据发生改变，所有的依赖的组件都会得到高效的更新；
（2）.不能直接修改store中的状态，改变store中的数据唯一的办法是commit对应的mutation；
<body>
<div id="app">
<first></first>
<second></second>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vuex/dist/vuex.js"></script>
<script>
let state = {
count:0,
shop:[{name:"奔驰"},{name:"法拉利"}]
}
// 创建store
let store = new Vuex.Store({
state,
mutations:{
// 提交的动作；一般用于修改store中的数据；
// 需要通过commit进行提交
// mutation 这个函数默认的第一个参数就是当前store的状态；
add_count(state){// state 代表的是vueX中的state;
state.count++;
}
}
});
let first = {
data(){
return {}
},
methods:{
add(){
//commit执行传一个字符串，字符串是mutation的方法名
this.$store.commit("add_count");
}
},
// VueX.mapState:将vuex中的state的数据，映射到当前实例的计算属性上；
computed:Vuex.mapState(["shop"]),
// 通过$store进行取值；
template:"<div >{{this.$store.state.count}}<button @click='add'>添加</button><li v-for='a in this.shop'>{{a.name}}</li></div>"
}
let second = {
data(){
return {}
},
template:"<div>{{this.$store.state.count}}</div>"
}
let vm = new Vue({
el:"#app",
data:{
},
components:{
first,
second
},
store// 当前vue实例就会新增一个$store属性，属性值是一个对象；同时也会给当前的组件新增$store属性
});
</script>
</body>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)