Vue 组件通信例子

使用两个组件， 一个组件ActiveUser显示姓名和年龄，另一个组件 UserData 可以修改这两项，如图所示：

工程里总共4个主要的文件：

1. main.js:

import { createApp } from "vue";
import App from "./App.vue";
import ActiveUser from "./components/ActiveUser.vue";
import UserData from "./components/UserData.vue";

const app = createApp(App);
// 注册组件
app.component("active-user", ActiveUser);
app.component("user-data", UserData);

app.mount("#app");

2. App.vue 为最上层组件，这里在 UserData 组件上监听 UserData 发出的事件 set-data。

<template>
    <div id="app">
        <active-user :user-name="user.name" :user-age="user.age"> </active-user>
        <user-data @set-data="setUserData"></user-data>
    </div>
</template>

<script>
    export default {
        data() {
            return { 
                user: {
                    name: "anonymous",
                    age: 0,
                }
            }
        },
        methods: {
            setUserData(name, age) {
            	// 使用符号 + 将String类型转换为Number 
                this.user = { name, age: +age, };
            },
        },
    }
</script>

<style>
html {
    font-family: sans-serif;
}

section {
    margin: 2rem auto;
    max-width: 30rem;
    border: 1px solid #ccc;
    padding:1rem;
    box-shadow: 5px 5px 5px -5px grey;
}

form {
    display:flex;
    flex-direction: column;    
    justify-content: center;
    align-items: left;
}

input,button {
    width:20rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    font-size: 1rem;
}

button {
    width:10rem;
    border: none;
    background: purple;
    color:white;
}
</style>

3. ActiveUser.vue:

<template>
    <section>
       <h2>Name: {{userName}} </h2>
       <h3>Age: {{userAge}} Years</h3> 
    </section>
</template>

<script> 
export default {
    props: {
        userName: {
            type: String,
            required: true,
        }, 
        userAge: {
            type: Number,
            required: true,
        }
    },
}
</script>

4. UserData.vue, v-model实现双向绑定。

<template>
    <section>
        <form @submit.prevent="submitData">
            <input type="text" placeholder="Your name" v-model="enteredName">
            <input type="text" placeholder="Your age" v-model="enteredAge" >
            <button>Set User Data</button>
        </form>
    </section>
</template>
<script> 
export default {
    emits: ['set-data'],
    data() {
        return {
            enteredName: "",
            enteredAge: "",
        }
    },
    methods: {
        submitData() {
            this.$emit("set-data", this.enteredName, this.enteredAge);
        }
    }
}

</script>