高度复用的弹出框组件的写法 vue2.0

和以前的文章一样用的vue-cli;具体的 安装步骤这里不做详细的解释了；直接开始了；一定要存在其他的组件

新建一个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>

在其他组件里调用

</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”哦！

访客的ip和所在地址： 访问时间: 当前时间: