步骤
1、组件中的显示部分,设置好App.vue中需要改变值的属性和触发方法
<h2>{{ name }}{{ isFavorite ? ' (Favorite)' : '' }}</h2>
<button @click="toggleFavorite">Toggle Favorite</button>
2、添加触发方法(需要用id绑定到某个组件实例)
toggleFavorite() {
this.$emit('toggle-favorite', this.id);
}
3、App.vue中添加@toggle-favorite,并赋予App.vue的方法
<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>
4、App.vue中新建方法改变isFavorite值
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
}
}
完整代码
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>
</li>
</template>
<script>
export default {
// props: [
// 'name',
// 'phoneNumber',
// 'emailAddress',
// 'isFavorite'
// ],
//add validation to props
props: {
id: {
type: String,
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';
// }
}
},
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);
}
}
};
</script>
App.vue
<template>
<section>
<header>
<h1>My Friends</h1>
</header>
<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
}
}
}
</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;
}
#app li {
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);
}
</style>