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>
原文:https://www.cnblogs.com/joesmile/p/12996641.html