Implementation method for transferring data between Vue components (code)

This article brings you a detailed explanation of PHP synergy implementation (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. The child component passes data to the parent component

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

Dynamically binds the data to be passed in the parent component through v-bind, and the child component receives the data passed by the parent component through the props attribute.

2. The parent component passes data to the child component

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

Customize an event, trigger the custom event in the child component through this.$emit() and give The parent component passes data, and custom events are listened to and received in the parent component.

3. Communication between non-parent and child components

    <div>
            <a-component></a-component>
            <b-component></b-component>
    </div>
    <script>
        Vue.component(&#39;a-component&#39;,{
            template:`
                <div>
                    <span>a组件的数据：{{num}}<br>
                    <button v-on:click="sendData">击我向b组件传递数据
                
            `,
            data(){
                return {
                    num:1
                }
            },
            methods:{
                sendData:function(){
                    this.$root.bus.$emit(&#39;change&#39;,this.num)
                }
            }
        })
        Vue.component(&#39;b-component&#39;,{
            template:`
                <div>b组件接收a组件数据后相加的数据：{{count}}
            `,
            data(){
                return {
                    count: 10
                }
            },
            created:function(){
                this.$root.bus.$on(&#39;change&#39;,(value)=>{
                    //alert(value)
                    this.count=this.count+value
                })
            }
        })
        var app=new Vue({
            el:&#39;#app&#39;,
            data:{
                bus:new Vue()
            },
        })
    </script>

The above is the detailed content of Implementation method for transferring data between Vue components (code). For more information, please follow other related articles on the PHP Chinese website!