和以前的文章一樣用的vue-cli;具體的 安裝步驟這里不做詳細的解釋了癞蚕；直接開始了队秩；一定要存在其他的組件
1.新建一個alertip.vue組件或详；組件代碼如下
<template>
<div class="tip">
<p>{{alertText}}</p>
<p><button @click="closeTip">關閉</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 -->
<!-- 此處的樣式只是添加了效果享完，沒有進行準確的排版荔茬，這里主要將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> //此處傳值，點擊事件
<el-button type="primary" @click="alerts()">點擊此按鈕慕蔚，出現(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”哦鸠匀！
