Vue 구성요소(코드) 간 데이터 전송을 위한 구현 방법-JS 튜토리얼-php.cn

Vue 구성요소(코드) 간 데이터 전송을 위한 구현 방법

不言

풀어 주다： 2018-10-23 15:20:24

앞으로

1935명이 탐색했습니다.

이 기사는 PHP 시너지 구현에 대한 자세한 설명을 제공합니다(코드 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

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>

로그인 후 복사

위 내용은 Vue 구성요소(코드) 간 데이터 전송을 위한 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!