Maison >interface Web >js tutoriel >Méthode d'implémentation pour transférer des données entre les composants Vue (code)

Méthode d'implémentation pour transférer des données entre les composants Vue (code)

不言avant: 2018-10-23 15:20:241886parcourir

Ce que cet article vous apporte est une explication détaillée de la mise en œuvre de la synergie PHP (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Le composant enfant transmet les données au composant parent

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

Lie dynamiquement les données à transmettre dans le composant parent via v-bind, et le composant enfant reçoit les données transmises. par le composant parent via l'attribut props .

2. Le composant parent transmet les données au composant enfant

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

Personnalisez un événement et déclenchez l'événement personnalisé dans le composant enfant via ceci.$emit( ) Et transmettez les données au composant parent, écoutez les événements personnalisés dans le composant parent et recevez des données.

3. Communication entre les composants non parents et enfants

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Utilisation basique des fonctions de fermeture JavaScript et solutions aux problèmes rencontrésArticle suivant：Utilisation basique des fonctions de fermeture JavaScript et solutions aux problèmes rencontrés

Articles Liés

Voir plus