5G云站长网
站长资源基地

vue组件之间相互传递数据的实现方法(代码)

本篇文章给大家带来的内容是关于php协成实现的详解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1、子组件给父组件传递数据

<body>     <div id="app">         父组件:{{total}}         <br>         <son-component v-bind:total="total"></son-component>     </div>     <script>          Vue.component('son-component',{             template:'<div>子组件:{{total}}+{{num}}={{add}}</div>',             props:{                 total:Number             },             data(){                 return {                     num:10                 }             },             computed:{                 add:function(){                     return num=this.total+this.num                 }             }         })         var app=new Vue({             el:'#app',             data:{                 total:1             },                     })     </script> </body>

通过v-bind动态绑定父组件中要传递的数据,子组件通过props属性接收父组件传递的数据。

2.父组件给子组件传递数据

<body>     <div id="app">         <son-component v-on:change="getData"></son-component>         <br>         {{total}}     </div>     <script>         Vue.component('son-component',{             template:'<button v-on:click=sendData>点击我向父组件传值</button>',             data(){                 return{                     count:1                 }             },             methods:{                 sendData:function(){                     this.$emit('change',this.count)                 }             }         })         var app=new Vue({             el:'#app',             data:{                 total:1             },             methods:{                 getData:function(value){                     this.total=this.total+value                 }             }         })     </script> </body>

自定义一个事件,在子组件中通过this.$emit()触发自定义事件并给父组件传递数据,在父组件中监听自定义事件并接收数据。

3.非父子组件之间的通信

<body>     <div id="app">             <a-component></a-component>             <b-component></b-component>     </div>     <script>         Vue.component('a-component',{             template:`                 <div>                     <span>a组件的数据:{{num}}</span><br>                     <button v-on:click="sendData">击我向b组件传递数据</button>                 </div>             `,             data(){                 return {                     num:1                 }             },             methods:{                 sendData:function(){                     this.$root.bus.$emit('change',this.num)                 }             }         })         Vue.component('b-component',{             template:`                 <div>b组件接收a组件数据后相加的数据:{{count}}</div>             `,             data(){                 return {                     count: 10                 }             },             created:function(){                 this.$root.bus.$on('change',(value)=>{                     //alert(value)                     this.count=this.count+value                 })             }         })         var app=new Vue({             el:'#app',             data:{                 bus:new Vue()             },         })     </script> </body>
历史上的今天
十月
3
    哇哦~~~,历史上的今天没发表过文章哦
赞(0) 打赏
未经允许不得转载:5G云源码分享网 » vue组件之间相互传递数据的实现方法(代码)

评论 抢沙发

评论前必须登录!

 

5G云站长 更专业 更方便

关于5G云联系我们

觉得能帮助你就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏