Vue父子组件之间的参数传递

一、父传子

1.首先由父组件向子组件传递参数

<!-- 父组件father.vue -->
<template>
    <div>
        <div>这是父组件father.vue</div>
        <div>父组件向子组件传递参数：{{data}}</div>
        <!-- 1.传参 -->
        <child :data1="data" data2="这是个静态参数"></child>
    </div>
</template>
<script>
    import child from "./child";
    export default {
        data() {
            return {
                data:"这是个动态参数",
            }
        },
        components: {
            child,
        }
    };
</script>
<style scoped>
</style>

2.然后子组件使用接受参数

<!-- 子组件child.vue -->
<template>
    <div>
    	<!-- 3.调用，可以将参数直接显示在页面中 -->
        <div>父组件data1: {{ data1 }}</div>
        <div>子组件data3: {{ data3 }}</div>
        <div>父组件data2: {{ data2 }}</div>
        <div>子组件data4: {{ data4 }}</div>
    </div>
</template>
<script>
    export default {
        // 2.接收参数，注意要与父组件中传递的参数名保持一致
        props: ["data1", "data2"],
        data() {
            return {
                // 3.调用，可以直接使用this.对子组件中的参数进行赋值
                data3: this.data1,
                data4: "data4",
        }
        },
        // 3.调用，使用this.可以直接对父组件传递的参数进行调用
        mounted() {
            this.data4 = this.data2;
        }
    };
</script>
<style scoped>
</style>

最终父组件页面效果如下

二、子传父

1.子组件向父组件传递参数

<!-- 子组件child.vue -->
<template>
    <div>
        <div>这是子组件child.vue</div>
        <input type="button" value="点击向父组件传参" @click="toFather">
    </div>
</template>
<script>
    export default {
        data(){
            return{
                child:'子组件',
            }
        },
        methods: {
            toFather(){
                //1.传参：使用$emit(String,data)方法向父组件传递参数，
                //第一个参数为父组件接受参数的方法名称，第二个参数为子组件要传递的参数
                this.$emit('receive',this.child);
            }
        },
    };
</script>
<style scoped>
</style>

2.父组件接收子组件传递的参数

<!-- father.vue -->
<template>
    <div>
        <div>这里是父组件father.vue</div>
        <div>接收子组件参数：{{father}}</div>
        <!-- 2.接收参数，在子组件的标签上绑定用以获取参数的函数，
        函数名要与子组件$emit中第一个参数相同 -->
        <child @receive="fromChild"></child>
    </div>
</template>
<script>
    import child from "./child";
    export default {
        data() {
            return {
                father: '',
            };
        },
        methods: {
            // 用以接收子组件传递的参数，并为父组件参数赋值
            fromChild(child){
                this.father=child;
            }
        },
        components: {
            child,
        }
    };
</script>
<style scoped>
</style>

最终父组件点击按钮后页面效果如下