1.父传子
Father.vue
<template>
<view>
<Son :toSonData="toSonData"></Son>
</view>
</template>
<script>
import Son from "./Son.vue";
export default{
data(){
return{
toSonData:"给子页面的信息"
}
},
components:{
Son
}
}
</script>
Son.vue
<template>
<view>
父页面给的信息{{toSonData}}
</view>
</template>
<script>
export default{
props:["toSonData"],//第一种接收方式
props:{//第二种接收方式
toSonData:{
type:string,
default:function(){
return ''
}
}
}
}
</script>
2.子传父
Son.vue
<template>
<view>
<view @click="toFatherData"></view>
</view>
</template>
<script>
export default{
methods:{
toFatherData(){
this.$emit("toFatherData","子页面给父页面的信息")
}
}
}
</script>
Father.vue
<template>
<view>
<Son @toFatherData="sendFatherData"></Son>
</view>
</template>
<script>
import Son from "./Son.vue"
export default{
data(){
return{
sendFatherData:""
}
},
components:{
Son
},
methods:{
sendFatherData(data){
this.sendFatherData=data;
}
}
}
</script>
