vue常用的传值 ,无非就是父子之间,或者兄弟之间去传值,下边一一介绍他们之间如何传参
父=>子
father.veu(父组件)
<template>
<div>
父组件:{{message}}
<Son :toSonData="toSonData"></Son>//在components注册的子组件
</div>
</template>
<script>
import Son from "./Son.vue";
export default {
data() {
return {
message : "我是爸爸",
toSonData: "大嘴巴子"//给子组件的值
};
},
components: {
Son
}
};
</script>
<style lang='scss' scoped>
</style>
Son.vue(子组件)
<template>
<div>
子组件:{{message}}
<br>
爸爸给我的礼物:{{toSonData}}
</div>
</template>
<script>
export default {
// props:["toSonData"],//第一种方式
props:{//第二种方式
toSonData:{
type:String,
default:function(){
return ""
}
}
},
data () {
return {
message : "我是儿子"
};
},
}
</script>
<style lang='scss' scoped>
</style>
子=>父
father.veu(父组件)
<template>
<div>
父组件:{{message}}
子组件接收的礼物:{{sondata}}
<Son @reception="jiehsou"></Son>
</div>
</template>
<script>
import Son from "./Son.vue";
export default {
data() {
return {
message : "我是爸爸",
sondata:''//接收子组件传来的值
};
},
components: {
Son
},
methods:{
jiehsou(data){
console.log(data)
this.sondata = data;
}
}
};
</script>
<style scoped>
</style>
Son.vue(子组件)
<template>
<div>
子组件:{{message}}
<button @click="add">点击向父组件传值</button>
</div>
</template>
<script>
export default {
data () {
return {
message : "我是儿子",
msg:'给父亲的礼物'
};
},
methods:{
add(){
this.$emit('reception',this.msg)
}
},
}
</script>
<style scoped>
</style>
兄弟之间的传值(注意:兄弟之间的传值和子传父的方式类似,都是通过emit事件发射的形式,但兄弟之间要找一个vue实例作为媒介,来进行传参,新建一个js文件列如event.js)
event.js里的内容
import Vue from ‘vue’;
export default new Vue;
注意要在所传参的兄弟组件中import导入
father.veu(父组件)
<template>
<div>
父组件:{{message}}
<Son></Son>
<brother></brother>
</div>
</template>
<script>
import Son from "./Son.vue";
import brother from "./brother.vue";
export default {
data() {
return {
message : "我是爸爸",
};
},
components: {
Son,
brother
},
};
</script>
<style scoped>
</style>
Son.vue(子组件)
<template>
<div>
子组件:{{message}}
<button @click="add">点击向兄弟组件传值</button>
</div>
</template>
<script>
import events from '../assets/event' //import导入上文所说的event,js
export default {
data () {
return {
message : "我是儿子",
msg:'给兄弟的礼物'
};
},
methods:{
add(){
events.$emit('reception',this.msg)
}
},
}
</script>
<style scoped>
</style>
子组件(brother.vue)
<template>
<div>
<span>我是兄弟组件</span>
<span>接收兄弟传过来的值:{{bro}}</span>
</div>
</template>
<script>
import events from '../assets/event' //import导入上文所说的event,js
export default {
data() {
return {
bro:''
}
},
created(){
this.butn()
},
methods:{
butn(){
events.$on('reception',(res)=>{ //res就是兄弟组件 Son传过来的值
this.bro = res
})
}
}
}
</script>
<style>
</style>