vue父组件和子组件数据传递

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

父组件

<!-- 父组件 -->
<template>
    <div class="home">
        <!-- 父组件向子组件传递数据 将"msg"通过"msgFn"传给子组件-->
        <HelloWorld :msgFn="msg" />
    </div>
</template>

<script>
// 引入子组件
import HelloWorld from "@/components/HelloWorld.vue";
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {
        HelloWorld
    },
    data() {
        // 这里存放数据
        return {
            msg: "hello world!"
        };
    },
};
</script>

子组件

<!-- 子组件 -->
<template>
    <div class="son">{{msgFn}}</div>
</template>

<script>
export default {
    // props 可以是数组或对象，用于接收来自父组件的数据
    // 接收父级传过来的数据msgFn
    props: ["msgFn"],
    data() {
        // 这里存放数据
        return {};
    }
};
</script>

2. 子组件向父组件传递数据

父组件

<!-- 父组件 -->
<template>
    <div class="home">
        <!-- sonMsg是子组件传过来的事件 fatherMsg是父组件要接收的方法 -->
        <HelloWorld @sonMsg="fatherMsg" />
    </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {
        HelloWorld
    },
    data() {
        // 这里存放数据
        return {};
    },
    // 方法集合
    methods: {
        // 参数 val 就是子组件传过来的数据
        fatherMsg(val) {
            console.log(val); // 来自子组件的信息！
        }
    }
};
</script>

子组件

<!-- 子组件 -->
<template>
    <div class="son">
        <button @click="btnClick">按钮</button>
    </div>
</template>

<script>
export default {
    data() {
        // 这里存放数据
        return {
            sonMsg: "来自子组件的信息！"
        };
    },
    methods: {
        btnClick() {
            // 用$emit()触发当前实例上的事件
            // 把this.sonMsg传递给sonMsg事件
            this.$emit("sonMsg", this.sonMsg);
        }
    }
};
</script>