vue中自定义组件，.install的使用

落日映苍穹つ 2023-01-02 01:30 167阅读 0赞

vue中.install方法的使用如同vue.use（），具体如下：

1、新建一个ceshi.vue文件

<template>
        <div>
            我是组件
        </div>
    </template>
    
    <script>
        export default { 
     
        }
    </script>
     
    <style scoped>
        div{ 
            width:20px;
            height:20px;
            background-color:black;
        }
    </style>

2、在同一目录下建立index.js文件，在这个文件中使用install方法来全局注册该组件，两种方法选其一即可，如下  
（1）

import ceshi from './ceshi.vue'
    const ceshi= { 
        install:function(Vue){ 
            Vue.component('ceshi',ceshi)
        }  //'ceshi'是后面可以使用的组件的名字，install是默认的一个方法
    }
    // 导出该组件
    export default ceshi

（2）简写

import ceshi from './ceshi.vue';
    
    ceshi.install = function(Vue) { 
      Vue.component(ceshi.name, ceshi);
    };
    
    export default ceshi;

3、使用

<template>
       <div>
          <Ceshi></Ceshi>
       </div>    
    </template>
    
    <script>
    import Ceshi from '@/components/ceshi';
        export default { 
          components: { 
            Ceshi,
          },
        }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关在Vue CLI中使用自定义组件编程

Vue CLI是一个基于Vue.js的官方脚手架工具，它提供了一套完整的开发环境和构建工具，方便我们开发Vue.js应用程序。在Vue CLI中使用自定义组件是非常常见的需求，

末蓝、/ 2024年02月29日 03:29/ 0 赞/ 15 阅读

相关 vue中自定义组件，.install的使用

vue中.install方法的使用如同vue.use（），具体如下： 1、新建一个ceshi.vue文件 <template> <div>

落日映苍穹つ/ 2023年01月02日 01:30/ 0 赞/ 168 阅读

相关 vue自定义组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

客官°小女子只卖身不卖艺/ 2022年09月09日 11:45/ 0 赞/ 296 阅读

相关 vue自定义组件

一、无参组件首先利用VUE-CLI创建一个vue项目（不用vue-cli也行此处只是原来建立好了，方便演示） ![在这里插入图片描述][watermark_

- 日理万妓/ 2022年09月02日 13:00/ 0 赞/ 290 阅读

相关 Vue自定义组件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

港控/mmm°/ 2022年07月12日 14:51/ 0 赞/ 302 阅读

相关 Vue 自定义组件使用v-model

正常的业务需求中，我们需要封装一些常用的组件。现在有一个最简单的需求，封装一个有特定样式的input框，够简单吧？好，我们来这样封装：字符串模板文件命名为 CInput

╰+攻爆jí腚メ/ 2022年06月12日 08:16/ 0 赞/ 412 阅读

相关自定义vue日历组件

今天给大家介绍一下，如何在vue中实现自定义日历组件，功能类似FullCalendar插件，但是却比较灵活。先给大家看一下组件的效果图，如下所示： ![640_wx_fm

短命女/ 2022年05月27日 03:30/ 0 赞/ 532 阅读

相关 vue 中自定义返回顶部组件

<template> <div id="goTop"> <div class="goTop" v-show="goTopShow

╰半夏微凉°/ 2021年11月09日 21:22/ 0 赞/ 351 阅读

相关使用vue的extend自定义组件开发

index.js import Vue from 'vue' import tip from './tip.vue' const Const

今天药忘吃喽~/ 2021年11月09日 13:18/ 0 赞/ 416 阅读

相关 vue 通讯录自定义组件

在线demo：[http://tangyupeng.top/dist/index.html\/phone][http_tangyupeng.top_dist_index.htm

Myth丶恋晨/ 2021年09月16日 13:12/ 0 赞/ 520 阅读