VUE makes a public prompt component that displays two seconds of automatic hiding, showing the value of the parent component to the child component (attached source code)

Requirement: VUE make a common prompt component, display two seconds automatically hidden, display values from the parent component to the child component dynamically.

Implementation steps:

1. Create a child component toptips. vue (which is the public tip component), optips.vue code is as follows:

<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>
Copy the code

2. The parent component references the child component

<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){this.toptopsmsg =false; } }, mounted(options){ this.toptopsMsg ='1' setTimeout(()=>{ this.toptopsMsg='2' },3000); } } </script>Copy the code