vue组件之间的通信

刺骨的言语ヽ痛彻心扉 2023-06-04 12:59 1阅读 0赞

## 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>

原文地址：[https://segmentfault.com/a/1190000016774374][https_segmentfault.com_a_1190000016774374]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[https_segmentfault.com_a_1190000016774374]: https://segmentfault.com/a/1190000016774374