Heim >Web-Frontend >js-Tutorial >Implementierungsmethode zum Übertragen von Daten zwischen Vue-Komponenten (Code)

Implementierungsmethode zum Übertragen von Daten zwischen Vue-Komponenten (Code)

不言nach vorne: 2018-10-23 15:20:241922Durchsuche

Dieser Artikel bietet Ihnen eine detaillierte Erklärung der PHP-Synergie-Implementierung (mit Code). Freunde in Not können sich darauf beziehen.

1. Die untergeordnete Komponente übergibt Daten an die übergeordnete Komponente

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

Bindet die in der übergeordneten Komponente zu übergebenden Daten dynamisch über v-bind und die untergeordnete Komponente empfängt die von der übergeordneten Komponente übergeordnete Komponente über das Props-Attribut.

2. Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente

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

Passen Sie ein Ereignis an, lösen Sie das benutzerdefinierte Ereignis in der untergeordneten Komponente durch this.$emit() aus und geben Die übergeordnete Komponente übergibt die Daten, und das benutzerdefinierte Ereignis wird in der übergeordneten Komponente abgehört und empfängt die Daten.

3. Kommunikation zwischen Nicht-Eltern- und Kinderkomponenten

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

Das obige ist der detaillierte Inhalt vonImplementierungsmethode zum Übertragen von Daten zwischen Vue-Komponenten (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Grundlegende Verwendung von JavaScript-Abschlussfunktionen und Lösungen für aufgetretene ProblemeNächster Artikel：Grundlegende Verwendung von JavaScript-Abschlussfunktionen und Lösungen für aufgetretene Probleme

In Verbindung stehende Artikel

Mehr sehen