vue自定义组件(通过Vue.use()来使用)即install的用法说明

2024-04-23 07:36:02

在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：

1.首先新建一个Cmponent.vue文件

// Cmponent.vue
<template>
  <div>
    我是组件
  </div>
</template>

<script>
  export default {

  }
</script>

<style scoped>
  div{
    font-size:40px;
    color:#fbb;
    text-align:center;
  }
</style>

2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件

import component from './Cmponent.vue'
const component = {
  install:function(Vue){
    Vue.component('component-name',component)
  } //'component-name'这就是后面可以使用的组件的名字，install是默认的一个方法

}
// 导出该组件
export default component

3.使用

// 只要在index.js里规定了install方法，就可以向其他ui组件库那样，使用Vue.use()来全局使用
import loading from './index.js'
Vue.use(loading)
<template>
  <div>
   <component-name></component-name>
  </div>
</template>

补充知识：如何在vue项目中自定义组件并在其他文件引用?

1.运行环境：

编译器:Visual Studio Code

Vue版本：2.9.6

在vue-cli搭建的项目目录树下

2.自定义vue组件

在src目录下新建一个components目录用于存放自定义组件:

创建存放自定义组建的目录

新建一个vue文件并编写如下内容(以HelloWorld为例):

这里的export default内容体内的name属性值就是自定义的组件名,template标签名内的内容是html标签组成的集合,script标签内是javascript代码定义动态效果,style标签内的内容是组件的css样式

编写语句引入vue组件:

这里的组件引入的语句是import HelloWorld from "@/components/HelloWorld";位于

在vue项目中引入自定义标签<HelloWorld>:

最后的运行效果:

I am Hello World Component

这里就是定义的组件内容

以上这篇vue自定义组件(通过Vue.use()来使用)即install的用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vue自定义组件(通过Vue.use()来使用)即install的用法说明

在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue <template> <div> 我是组件 </div> </template> <script> export default { } </script> <style scoped> div{ font-size:40px; col
浅析Vue自定义组件的v-model

最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是这么写的: <div id="app"> <input v-model="price"> </div> new Vue({ el: '#app', data: { price: '' } }); 通过该语句实现price变量与输入值双
vue 自定义组件 v-model双向绑定、父子组件同步通信的多种写法

上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo
VUE 自定义组件模板的方法详解

本文实例讲述了VUE 自定义组件模板的方法.分享给大家供大家参考,具体如下: 先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示. 关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only b
使用form-create动态生成vue自定义组件和嵌套表单组件

使用form-create动态生成vue自定义组件和嵌套表单组件 [github]| [说明文档] maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreate.maker.create('i-button').props({ type:'primary', field:'btn' loading:true }) ] $f = formCreate.create(rule); 上面的代码是通过maker生成器动态生成一个
vue 自定义组件的写法与用法详解

三个技能,父组件 -> 子组件传值(props).子组件 -> 父组件传值(emit用来使这个独立的组件通过一些逻辑来融入其他组件中.举个具体点的例子,假如你要做一辆车,车轮是要封装的一个独立组件,props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹,图案等:而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来. (1)使用props可以实现父子组件之间的传值 (2)使用this.$emit()可是实现子组件调用父组件的方法一.在commponents文
Vue自定义组件的四种方式示例详解

四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码. 1.全局组件定义方式示例: Vue.component("hello-component",{ props:["message"], t
Vue自定义组件使用事件修饰符的踩坑记录

前言今天在使用自写组件时,突然遇到久违的冒泡事件,就想着使用Vue自带的事件修饰符(.stop),本以为可以就此解决冒泡,却遇到这个问题. 脑中一片问号????这是什么鬼,我是按照Vue文档写的啊(吐血) 于是,我开始踏上了解决错误的路程程序员常规操作: 打开浏览器–百度/谷歌搜一搜,发现搜出来的东西不少,没一个是能解决我的问题的答案,没办法Vue文档走起!!!! 看了至少几十遍Vue文档的我,自以为没有看漏什么东西,确信Vue文档也没有解决这种问题的答案,苦苦寻找,来到这里嗯?这个eve
web面试vue自定义组件及调用方式

引入: 由于项目需求, 部分相同的代码我们会封装成组件, 在需要使用的地方导入, 并以标签的形式书写在中, 但是在"vant"组件库中, "Dialog 弹出框"组件有2中使用方式通常我们自定义组件, 一般也是通过方式二的形式使用, 今天介绍方式一如何使用编码实现以插件的形式使用组件 // 将要显示的组件导入 import mymodel from '../components/mymodel.vue' export default { install: fu
vue自定义组件实现v-model双向绑定数据的实例代码

项目中会遇到自定义公共组件供项目调用,正常情况可以使用 props定义参数接收父组件传的参数,然后通过子组件的$emits()方法回传数据给父组件. 类似如下: 父组件 <common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'" @checkChange="checkChange">

vue自定义组件(通过Vue.use()来使用)即install的用法说明

相关推荐

随机推荐