vue 全局组件封装

快来打我* 2023-05-30 06:12 13阅读 0赞

**vue中写好一个组件功能**

<template>
      <div id="app">
            <div class="popwin">
                <p class="info">{
       {info}}</p>
                <button class="close_popwin" @click="close_popwin">关闭</button>
            </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'popwin',
    //外部使用传来的数据
        props:{
            info: String,
        },
        methods:{
    //所有的事件逻辑在使用方那里处理，组件内部只告知发生了事件
            close_popwin(){
                this.$emit("close_popwin",'')
            }
        }
    }
    </script>
    
    <style scoped>
    .popwin{
       width: 300px;
       height: 70px;
       background: #000;
       opacity: 0.7; 
       position:relative;
       display: flex;
       justify-content: space-between;
       align-items: center;
       position: fixed;
       left:200px;
       top:50%;
    }
    .close_popwin{
        color: red;
        border: none;
        background-color: transparent;
        outline: none;
        cursor: pointer;  
    }
    .info{
        color: #fff;
        line-height: 70px;
        font-size: 14px;
    }
    </style>

**新建index.js文件，文件名自己取**

//全局组件导出
    
    import popwin from './popwin.vue'
    
    const Popwin = {
        install:function(Vue){
    //第一个参数是name 第二个是引入的组件
            Vue.component('popwin',popwin)
        }
    }
    export default Popwin

**main.js全局注册：**

//引入js
    import Popwin from './components/view/index'
    Vue.use(Popwin)

**组件中使用：**

<template>
      <div id="app">
        
          <popwin info='局部地区多云转晴' @close_popwin='popwin_close' v-show="shows"></popwin>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      data(){
        return{
          shows:true,
        }
      },
      methods:{
         popwin_close(){
            this.shows = false
          }
      }
    }
    </script>
    
    <style scoped>
        
    </style>