使用两个组件， 一个组件ActiveUser显示姓名和年龄，另一个组件 UserData 可以修改这两项，如图所示：
- 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"); - 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> - 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> - 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> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/220603.html原文链接：https://javaforall.net
