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>
