和以前的文章一样用的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')；//分发事件
}
},
}
</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.在其他组件里调用
</template>
<div>
<alertip v-show="alertipShow" @closeTip="alertipShow = false" :alertText="alertText"></alertip> //此处传值，点击事件
<el-button type="primary" @click="alerts()">点击此按钮，出现浮动窗口</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="此处的值为传过去的值，不同的页面用的同一个组件，但是弹出的内容是不同的！,这个信息在app组件里";
this.alertipShow = true;
},
}
}
</script>
其他页面同样的方法可以调用！展示的效果是一样的，但是不同组件可以传入的值可以是不同的，展示的内容也是不同的，但是效果弹窗是一样的！
源码见：https://github.com/sky-xsk/vue2.0-start-
给加个“star”哦！
