当我们添加用户成功后,希望能弹出一个窗口信息告诉用户添加成功。
首先在components中新建Alert.vue:
<template>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
{{message}}
</div>
</template>
<script>
export default {
name: 'alert',
props:["message"],
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
这里是通过props的message来进行组件的通信的!
然后在Customers.vue中引用这个Alert.vue组件:
<template>
<div class="customers container">
<Alert v-if="alert" v-bind:message="alert"></Alert>
<h1 class="page-header">用户管理系统</h1>
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>电话</th>
<th>邮箱</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="customer in customers">
<td>{{customer.name}}</td>
<td>{{customer.phone}}</td>
<td>{{customer.email}}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import Alert from "./Alert"
export default {
name: 'customers',
data () {
return {
customers:[],
alert:""
}
},
methods:{
fetchCustomers(){
this.$http.get("http://localhost:3000/users")
.then(function(response){
//console.log(response);
this.customers = response.body;
})
}
},
created(){
if(this.$route.query.alert){
this.alert = this.$route.query.alert;//将获得的message赋值给alert,再通过v-bind:message="alert"进行父子组件信息的传递
}
this.fetchCustomers();
},
updated(){
this.fetchCustomers();
},
components:{
Alert
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
最后在添加用户成功后去传递窗口要弹出的信息message:
<template>
<div class="add container">
<h1 class="page-header">添加用户</h1>
<form v-on:submit="addCustomer">
<div class="well">
<h4>用户信息</h4>
<div class="form-group">
<label>姓名</label>
<input type="text" class="form-control" placeholder="name" v-model="customer.name">
</div>
<div class="form-group">
<label>电话</label>
<input type="text" class="form-control" placeholder="phone" v-model="customer.phone">
</div>
<div class="form-group">
<label>邮箱</label>
<input type="text" class="form-control" placeholder="email" v-model="customer.email">
</div>
<div class="form-group">
<label>学历</label>
<input type="text" class="form-control" placeholder="education" v-model="customer.education">
</div>
<div class="form-group">
<label>毕业学校</label>
<input type="text" class="form-control" placeholder="graduationschool" v-model="customer.graduationschool">
</div>
<div class="form-group">
<label>职业</label>
<input type="text" class="form-control" placeholder="profession" v-model="customer.profession">
</div>
<div class="form-group">
<label>个人简介</label>
<!-- <input type="text" class="form-control" placeholder="profile" v-model="customer.profile"> -->
<textarea class="form-control" rows="10" v-model="customer.profile"></textarea>
</div>
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'add',
data () {
return {
customer:{}
}
},
methods:{
addCustomer(e){
// console.log(123);
if (!this.customer.name || !this.customer.phone || !this.customer.email) {
console.log("请添加对应的信息!");
}else{
let newCustomer = {
name:this.customer.name,
phone:this.customer.phone,
email:this.customer.email,
education:this.customer.education,
graduationschool:this.customer.graduationschool,
profession:this.customer.profession,
profile:this.customer.profile
}
this.$http.post("http://localhost:3000/users",newCustomer)
.then(function(response){
// console.log(response);
this.$router.push({path:"/",query:{alert:"用户信息添加成功"}});
})
e.preventDefault();
}
e.preventDefault();
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
就是修改了this.$router.push({path:"/",query:{alert:"用户信息添加成功"}});
这一行代码!