Home >Web Front-end >JS Tutorial >Implementation method for transferring data between Vue components (code)

Implementation method for transferring data between Vue components (code)

不言forward: 2018-10-23 15:20:241953browse

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

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

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

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

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

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

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!

Statement：

This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Basic use of JavaScript closure functions and solutions to problems encounteredNext article：Basic use of JavaScript closure functions and solutions to problems encountered

See more

Implementation method for transferring data between Vue components (code)

Related articles