097 Demo Adding More Component Communication

步骤

为组件FriendContact.vue添加Delete Contact按钮

1、html中添加按钮并添加emit方法

<button @click="deleteContact">Delete Contact</button>

emits: ['toggle-favorite','delete-contact'], //让自己或者他人可以清楚知道组件中有哪些事件被触发

deleteContact() {
            this.$emit('delete-contact', this.id);
        }

2、App.vue中添加delete-contact监听和delete方法

<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)" @delete-contact="deleteContact"></friend-contact>
</ul>

deleteContact(friendId) {
      // const identifiedFriend = this.friends.find(friend => friend.id === friendId);
      // if (!identifiedFriend) return alert('No such friend exists!')
      // this.friends.splice(this.friends.indexOf(identifiedFriend), 1)

      this.friends = this.friends.filter(friend => friend.id !== friendId);
    }

完整代码

FriendContact.vue

<template>
    <li>
        <h2>{{ name }}{{ isFavorite ? ' (Favorite)' : '' }}</h2>
        <button @click="toggleFavorite">Toggle Favorite</button>
        <button @click="toggleDetails">{{ detailsVisiable ? 'Hide' : 'Show' }} Details</button>
        <ul v-if="detailsVisiable">
            <li><strong>Phone:</strong>{{ phoneNumber }}</li>
            <li><strong>Email:</strong>{{ emailAddress }}</li>
        </ul>
        <button @click="deleteContact">Delete Contact</button>
    </li>
</template>

<script>
export default {
    // props: [
    //     'name',
    //     'phoneNumber',
    //     'emailAddress',
    //     'isFavorite'
    // ],

    //add validation to props
    props: {
        id: {
            //type: Number,
            required: true
        },
        name: {
            type: String,
            required: true,
        },
        phoneNumber: {
            type: String,
            required: true
        },
        emailAddress: {
            type: String,
            required: true
        },
        isFavorite: {
            type: Boolean,
            required: false,
            default: false,
            // validator: function (value) {
            //     return value === '0' || value === '1';
            // }
        }
    },
    emits: ['toggle-favorite','delete-contact'], //让自己或者他人可以清楚知道组件中有哪些事件被触发
    // emits: {
    //     'toggle-favorite': function (id) {
    //         if (id) {
    //             return true;
    //         } else {
    //             console.log('id is required');
    //             return false;
    //         }
    //     }
    // },
    data() {
        return {
            detailsVisiable: false,
            friend: {
                name: "John Doe",
                phone: "123-456-7890",
                email: "john@example.com",
            },
        };
    },
    methods: {
        toggleDetails() {
            this.detailsVisiable = !this.detailsVisiable;
        },
        //属性无法改变App.vue中传过来的值再返回去,所以无法直接使用isFavorite
        //所以需要重新定义一个变量,在toggleFavorite中改变这个值
        toggleFavorite() {
            //this.friendIsFavorite = !this.friendIsFavorite;
            this.$emit('toggle-favorite', this.id);
        },
        deleteContact() {
            this.$emit('delete-contact', this.id);
        }
    }
};
</script>

App.vue

<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)" @delete-contact="deleteContact"></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)
    },
    deleteContact(friendId) {
      // const identifiedFriend = this.friends.find(friend => friend.id === friendId);
      // if (!identifiedFriend) return alert('No such friend exists!')
      // this.friends.splice(this.friends.indexOf(identifiedFriend), 1)

      this.friends = this.friends.filter(friend => friend.id !== friendId);
    }
  }
}
</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>