和以前的文章一樣用的vue-cli;具體的 安裝步驟這里不做詳細(xì)的解釋了；直接開始了；一定要存在其他的組件

1.新建一個alertip.vue組件；組件代碼如下

<template>
  <div class="tip">
        <p>{{alertText}}</p>
        <p><button @click="closeTip">關(guān)閉</button></p>
  </div>
</template>
<script>
    export default {
        name: 'tip',
        components: { },
        data() {
            return { }
        },
        props: ['alertText'], //接收傳的值
        methods:{
             closeTip(){
                this.$emit('closeTip')；//分發(fā)事件
            } 
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- 此處的樣式只是添加了效果，沒有進(jìn)行準(zhǔn)確的排版，這里主要將vue的寫法！-->
<style scoped>
.tip{ width: 400px;height: 200px; overflow: hidden; position: fixed; left:38%;top:20%; background: #fff; border: 1px solid #ccc; padding:20px;} 
</style>

2.在其他組件里調(diào)用

</template>
<div>  
      <alertip v-show="alertipShow" @closeTip="alertipShow = false" :alertText="alertText"></alertip> //此處傳值，點(diǎn)擊事件
      <el-button type="primary" @click="alerts()">點(diǎn)擊此按鈕，出現(xiàn)浮動窗口</el-button>
</div>
</template>
<script>
import alertip from './components/alertip.vue'; //此處注意組件的路徑
 export default {
        name: 'app',
        components: {
            alertip
        },
       data() {
            return {
                alertipShow:false,
                alertText:''
            }
        },
         methods: {
            alerts(){
                this.alertText="此處的值為傳過去的值，不同的頁面用的同一個組件，但是彈出的內(nèi)容是不同的！,這個信息在app組件里";
                this.alertipShow = true;
            },  
     }
}       
</script>

其他頁面同樣的方法可以調(diào)用！展示的效果是一樣的，但是不同組件可以傳入的值可以是不同的，展示的內(nèi)容也是不同的，但是效果彈窗是一樣的！

源碼見：https://github.com/sky-xsk/vue2.0-start-

給加個“star”哦！