096 Demo Adding Components & Connecting Them

步骤

实现手动输入数据添加新的联系人

1、添加新的组件NewFriend.vue用于录入数据

<template>
    <form @submit.prevent="submitData"> <!--阻止刷新页面-->
        <div>
            <label>Name</label>
            <input type="text" v-model="enteredName">
        </div>
        <div>
            <label>Phone</label>
            <input type="text" v-model="enteredPhone">
        </div>
        <div>
            <label>Email</label>
            <input type="text" v-model="enteredEmail">
        </div>
        <div>
            <button>Add Contact</button>
        </div>
    </form>
</template>

<script>
export default {
    data() {
        return {
            enteredName: '',
            enteredPhone: '',
            enteredEmail: ''
        };
    },
    emits: ['add-contact'],
    methods: {
        submitData() {
            if (this.enteredName && this.enteredPhone && this.enteredEmail) {
                传单个数据
                // this.$emit('add-contact', 
                //     this.enteredName,
                //     this.enteredPhone,
                //     this.enteredEmail
                // );

                //传对象
                this.$emit('add-contact', {
                    name: this.enteredName,
                    phone: this.enteredPhone,
                    email: this.enteredEmail
                });
                //清空输入框
                this.enteredName = '';
                this.enteredPhone = '';
                this.enteredEmail = '';
            } else {
                alert('Please enter all fields!');
            }
        }
    }
};
</script>

2、main.js中导入组件

import { createApp } from 'vue'

import App from './App.vue'
import FriendContact from './components/FriendContact.vue';
import NewFriend from './components/NewFriend.vue';

const app = createApp(App);

app.component('friend-contact', FriendContact); 
app.component('new-friend', NewFriend);

app.mount('#app');

3、App.vue中添加style，添加addContact方法添加联系人

<template>
  <section>
    <header>
      <h1>My Friends</h1>
    </header>
    <new-friend @add-contact="addContact"></new-friend> <!--使用组件-->
    <ul>
      <friend-contact v-for="friend in friends" :key="friend.id" :id="friend.id" :name="friend.name"
        :phone-number="friend.phone" :email-address="friend.email" :is-favorite="friend.isFavorite"
        @toggle-favorite="toggleFavoriteStatus(friend.id)"></friend-contact>
    </ul>
  </section>
</template>

<script>
// const app = {
export default {
  data() {
    return {
      friends: [
        //{ id: 1, name: 'John', phone: '1234567890', email: 'john@gmail.com', isFavorite: true },
        // { id: 2, name: 'Jane', phone: '0987654321', email: 'jane@gmail.com', isFavorite: false },
        //{ id: 3, name: 'Bob', phone: '1245678901', email: 'bob@gmail.com', isFavorite: true },
        // { id: 4, name: 'Alice', phone: '0123456789', email: 'alice@gmail.com', isFavorite: true },
        // { id: 5, name: 'Jack', phone: '1029384756', email: 'jack@gmail.com', isFavorite: false },
        // { id: 6, name: 'Jill', phone: '1234567890', email: 'jill@gmail.com', isFavorite: true }
      ]
    }
  },
  methods: {
    toggleFavoriteStatus(friendId) {
      // const identifiedFriend = this.friends.find(friend => friend.id === friendId);
      // identifiedFriend.isFavorite = !identifiedFriend.isFavorite;
      this.friends.find(friend => friend.id === friendId).isFavorite =
        !this.friends.find(friend => friend.id === friendId).isFavorite
    },
    添加方法addContact用于增加联系人
    // addContact(name, phone, email) {
    //   const newFriend = { id: this.friends.length + 1, name: name, phone: phone, email: email, isFavorite: false };
    //   this.friends.push(newFriend);
    // }
    addContact(friendObj) {
      const newFriend = {id: this.friends.length + 1, ...friendObj};
      this.friends.push(newFriend)
    }
  }
}
</script>

<style>
* {
  box-sizing: border-box;
}

html {
  font-family: "Jost", sans-serif;
}

body {
  margin: 0;
}

header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #58004d;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*为NewFriend-form添加style*/
#app li,
#app form {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 1rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #58004d;
  margin: 0 0 1rem 0;
}

#app button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ff0077;
  background-color: #ff0077;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}

#app button:hover,
#app button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}


/*NewFriend-newstyle*/
#app input {
  font: inherit;
  padding: 0.2rem 0.4rem;
}

#app label {
  font-weight: bold;
  margin-right: 1rem;
  width: 7rem;
  display: inline-block;
}

#app form div {
  margin: 1rem 0;
}
</style>