vue子组件向父组件传值，实现不刷新时数据的局部改变

本文的代码实现的功能：进入页面时，显示确认充值30元。任何时候点击50元，显示确认充值50元。任何时候点击30元，显示确认充值30元。使用子组件向父组件传值实现。

12251656.png

12251657.png

搭建好vue的开发环境后，新建两个文件，如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标签中的内容了,写完后页面已经显示确认充值50元,50是data的返回值。<bb></bb>表示引入的bb组件,此时bb组件还没有内容可以显示。

<template>
    <view>
            <bb></bb>       
            <view>确认充值{{querenchongzhixianshi}}元</view>     
    </view>
</template>

5、在bb.vue中，写下需要显示的内容，顺便再写点击事件触发的方法

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

6、在子组件bb.vue中，在methods中，使用this.$emit函数，向父组件传值。此时点击50元触发xuanze1方法，把50这个数值传到父组件去。点击30元触发xuanze2方法，30这个数值把传到父组件去。

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

同时在父组件a.vue中,bb标签中加入

@querenchongzhi="fquerenchongzhi"

表示监听到子组件的querenchongzhi传来的数，用方法fquerenchongzhi可以获取从子组件传来的数
7、父组件中写fquerenchongzhi方法，方法带一个参数，这个参数表示从子组件接收到的值

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

res即是从子组件接收到的值，将它赋值给this.querenchongzhixianshi，即赋值给data中的返回值querenchongzhixianshi，由于这个值已经在页面中用双括号括起来显示，确认充值{{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>

最后编辑于：2019.12.25 18:11:02