VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件（附源码）

需求：VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值由父组件动态传给子组件。

实现步骤：

1.创建一个子组件 Toptips.vue (它就是公共提示组件)， optips.vue代码如下：

<template>
  <div id="toptips" class="toptips">{{isMsg}}</div>
</template>
 
<script>
  export default {
    data() {
      return {
        isMsg: ''
      }
    },
    props: ['msg'],
    methods: {
      is_show: function() {
        if (this.isMsg) {
          setTimeout(() => {
            this.$emit('setTipMsg')
          }, 2000);
        }
      }
    },
    mounted() {
      this.isMsg = this.msg;
      this.is_show();
    }
  }
</script>
 
<style scoped>
  .toptips {
    position: fixed;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
    font-size: 28rpx;
    text-align: center;
    color: #fff;
    z-index: 5000;
    word-wrap: break-word;
    word-break: break-all;
    background-color: #ffb403;
  }
</style>

2.父组件引用该子组件

<template>
  <div id='demo'>
    <Toptips v-if='toptopsMsg' @setTipMsg='setTipMsg' :msg='toptopsMsg' />
  </div>
</template>
 
<script>
import Toptips from "../common/Toptips";
  export default{
    data(){
      return{
        toptopsMsg:''
      }
    },
    components:{Toptips:Toptips},
    methods:{
      setTipMsg:function(e){
        //e能获取到子组件传递给父组件的值
        this.toptopsMsg=false;
      }
    },
    mounted(options){
      this.toptopsMsg ='1'
      setTimeout(()=>{
        this.toptopsMsg='2'
      },3000);
    }
  }
</script>