vue.js搭建使用者管理系統練手（五）----嵌入彈窗元件

當我們新增使用者成功後，希望能彈出一個視窗資訊告訴使用者新增成功。

首先在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">&times;</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:"使用者資訊新增成功"}});
這一行程式碼！