Vue自定义slot写消息提示小红点

先上效果图：

我是用的elementUI结合作用域插槽，
先写slot，直接用的模板定义

<script type="text/x-template" id="tipnotes">
    
        text="redval">
    
script>

注册组件：

Vue.component('tipnotes',{
        template:'#tipnotes',
        props:['redval']
    });

data属性：

data: function () {
            return { 
                redmsg:"3",
                rednote:"4",
                redday:"0"
            };
        },

父组件模板：

<el-dropdown class=" color-white head-item">
                  <span class="el-dropdown-link pointer"><i class="fa fa-user-circle fa-lg">i>
                    张三<i class="el-icon-caret-bottom el-icon--right">i>
                  span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><i class="fa fa-commenting-o">i>消息提醒
                        <tipnotes :redval="redmsg">
                            <template  scope='redtemp'>
                                <i class="redtip bg-danger" v-show="redtemp.text>0">{{redtemp.text}}i>
                            template>
                        tipnotes>
                        el-dropdown-item>
                        <el-dropdown-item><i class="fa fa-comments-o">i>会议通知
                            <tipnotes :redval="rednote">
                                <template  scope='redtemp'>
                                    <i class="redtip bg-danger" v-show="redtemp.text>0">{{redtemp.text}}i>
                                template>
                            tipnotes>
                        el-dropdown-item>
                        <el-dropdown-item><i class="fa fa-calendar">i>日程安排
                            <tipnotes :redval="redday">
                                <template  scope='redtemp'>
                                    <i class="redtip bg-danger" v-show="redtemp.text>0">{{redtemp.text}}i>
                                template>
                            tipnotes>
                        el-dropdown-item>
                        <el-dropdown-item @click=""><i class="fa fa-power-off">i>退出登录el-dropdown-item>
                    el-dropdown-menu>
            el-dropdown>

最后样式

.redtip{ border-radius: 50%; font-style: normal; color: #fff; display: inline-block; width: 1.2em; height: 1.2em; text-align: center; line-height: 1.2em; font-size: 0.8em;}

此文纯粹记录实践中掌握的知识点，很有可能写的不是最好的方案，希望我能写出来更多更好的内容（加油！），如果我有错误的地方希望大家能帮我指正，谢谢！