本文的代碼實現(xiàn)的功能：進入頁面時，顯示確認充值30元。任何時候點擊50元，顯示確認充值50元。任何時候點擊30元，顯示確認充值30元。使用子組件向父組件傳值實現(xiàn)。

12251656.png

12251657.png

搭建好vue的開發(fā)環(huán)境后，新建兩個文件，如a.vue,bb.vue。
1、從零開始，寫幾個標簽，a.vue，bb.vue都寫上

<template>
    <view>
        
    </view>
</template>

<script>
    export default{
        
    }
</script>

<style>
</style>

2、在export default的大括號中寫父組件a.vue的data的返回值，進入頁面時，默認顯示充值金額50元，代碼如下

        data(){
            return{
                querenchongzhixianshi:50,
            }
        },

3、讓a包含bb，使得a為父組件，bb為子組件。在父組件a.vue的script標簽中，引入子組件，如何引入子組件呢，首先import標簽把子組件包含進來，然后注冊組件，在export default的大括號中加入components:{bb},，表示bb組件的注冊，此時整個script標簽的代碼是這樣的。

    import bb from "@/components/chongzhi/bb.vue"
    export default{
        components:{bb},
        data(){
            return{
                querenchongzhixianshi:50,
            }
        },
    }

4、然后可以寫template標簽中的內(nèi)容了,寫完后頁面已經(jīng)顯示確認充值50元,50是data的返回值。<bb></bb>表示引入的bb組件,此時bb組件還沒有內(nèi)容可以顯示。

<template>
    <view>
            <bb></bb>       
            <view>確認充值{{querenchongzhixianshi}}元</view>     
    </view>
</template>

5、在bb.vue中，寫下需要顯示的內(nèi)容，順便再寫點擊事件觸發(fā)的方法

<template>
    <view>
        <view @tap="xuanze1()">50元</view>
        <view @tap="xuanze2()">30元</view>
    </view>
</template>

6、在子組件bb.vue中，在methods中，使用this.$emit函數(shù)，向父組件傳值。此時點擊50元觸發(fā)xuanze1方法，把50這個數(shù)值傳到父組件去。點擊30元觸發(fā)xuanze2方法，30這個數(shù)值把傳到父組件去。

    export default{
        methods:{
            xuanze1(){
                this.$emit('querenchongzhi',50);
            },
            xuanze2(){
                this.$emit('querenchongzhi',30);
            }
        }
    }

同時在父組件a.vue中,bb標簽中加入

@querenchongzhi="fquerenchongzhi"

表示監(jiān)聽到子組件的querenchongzhi傳來的數(shù)，用方法fquerenchongzhi可以獲取從子組件傳來的數(shù)
7、父組件中寫fquerenchongzhi方法，方法帶一個參數(shù)，這個參數(shù)表示從子組件接收到的值

        methods:{
            fquerenchongzhi(res){                               
                this.querenchongzhixianshi=res;
            },
        },

res即是從子組件接收到的值，將它賦值給this.querenchongzhixianshi，即賦值給data中的返回值querenchongzhixianshi，由于這個值已經(jīng)在頁面中用雙括號括起來顯示，確認充值{{querenchongzhixianshi}}元。點擊30元時即改變這個返回值，看到確認充值30元。點擊50元時即改變這個返回值，看到確認充值50元。
全部代碼如下
a.vue的代碼：

<template>
    <view>
            <bb @querenchongzhi="fquerenchongzhi"></bb>     
            <view>確認充值{{querenchongzhixianshi}}元</view>     
    </view>
</template>
<script>
    import b from "@/components/chongzhi/bb.vue"
    export default{
        components:{xuanzechongzhijine},
        data(){
            return{
                querenchongzhixianshi:50,
            }
        },
        methods:{
            fquerenchongzhi(res){
                this.querenchongzhixianshi=res;
            },
        },
    }
</script>
<style>
</style>

子組件bb.vue的代碼：

<template>
    <view>
        <view @tap="xuanze1()">50元</view>
        <view @tap="xuanze2()">30元</view>
    </view>
</template>
<script>
    export default{     
        methods:{
            xuanze1(){
                this.$emit('querenchongzhi',50);
            },
            xuanze2(){
                this.$emit('querenchongzhi',30);
            }
        }
    }
</script>
<style>
</style>