Vue父子组件互相传值

本文主要是介绍Vue父子组件互相传值，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、父组件向子组件传值

父组件

<template>
    <view class="content">
        <view>父组件</view>
        <Com :msg="flag" :str="str" :num="num" :arr="arr" :obj="obj"></Com> 
    </view>
</template>

<script>
    import Com from '../../../components/com.vue'
    export default {
        data() {
            return {
                flag:true,
                str:'skskks',
                num:100,
                arr:[
                    {
                        name:'lika',
                        isAct:false
                    },
                    {
                        name:'like',
                        isAct:false
                    }
                ],
                obj:{
                    a:1
                }
            }
        },
        components:{
            Com
        },
        onl oad() {

        }
    }
</script>

子组件

<template>
    <view class="com">
        子组件 -- {{ msg }} -- {{ str }} -- {{ num }} -- {{ arr }} -- {{ obj }}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        props:{
            msg:{
                type:Boolean,
                default:false
            },
            str:{
                type:String,
                default:'120'
            },
            num:{
                type:Number,
                default:0
            },
            arr:{
                type:Array,
                default:[]
            },
            obj:{
                type:Object,
                default:{}
            }
        },
        methods:{
            
        }
    }
</script>

<style>
    .com{
        color: #007AFF;
        font-weight: 600;
    }
</style>

二、子组件向父组件传值

父组件

<template>
    <view class="content">
        <view>父组件</view>
        <Com @ChildToFather="handleFather"></Com> 
    </view>
</template>

<script>
    import Com from '../../../components/com.vue'
    export default {
        data() {
            return {
                
            }
        },
        components:{
            Com
        },
        onl oad() {

        },
        methods:{
            handleFather(params) {
                console.log('这是父组件的方法');
                console.log('以下是子组件传递过来的值')
                console.log(params)
            }
        }
    }
</script>

子组件

<template>
    <view class="com">
        子组件
        <view class="two" @click="handleChild">
            传值
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods:{
            handleChild() {
                let params = [
                    {
                        name:'lika',
                        isAct:false
                    },
                    {
                        name:'like',
                        isAct:true
                    }
                ]
                this.$emit('ChildToFather',params);
            }
        }
    }
</script>

这篇关于Vue父子组件互相传值的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！