vue如何编写组件可以通过Vue.use()使用

一般平时用别人的组件时都是通过import引入然后Vue.use()来使用，那么如何让我们写的组件也可以用这种方式使用呢？

1.首先新建一个文件夹例如：Home，然后在该文件中新建两个文件Home.vue和index.js

文件

2.在Home.vue中和往常一样如：

<template><div id="Home"><h1>加上点加鸡蛋</h1></div>
</template>
<script>export default{name:"Home"}
</script>

3.接下来是index.js的编写（主要）

import Home from './Home.vue'
// install方法必须有
export default{install:function(Vue) {Vue.component('Home',Home);}
}

4.接下来就可以在main.js中美美的引入你的组件了

import Home from './components/Home'
Vue.use(Home)

5.使用（在App.vue中）

<div id="app"><mt-button type="default">default</mt-button><mt-button type="primary">primary</mt-button><mt-button type="danger">danger</mt-button><Home></Home>
</div>

6.效果展示

效果展示

个人博客https://myml666.github.io

vue如何编写组件可以通过Vue.use()使用相关推荐

vue 添加全局组件_自定义vue全局组件(Loading为例)
首先创建一个项目 vue init webpack-simple define-demo //define-demo 项目名称 cd define-demo npm install //安装本次所有需 ...
vue 文本显示组件_一个Vue组件，可在您键入时突出显示文本
vue 文本显示组件 Vue高亮输入 (Vue Highlightable Input) Highlight and style specific words as you're typing. 键入 ...
vue日期选择组件_一个Vue组件，为波斯开发人员提供日期选择器
vue日期选择组件 Vue波斯日期选择器 (vue persian datepicker) This is a Jalali date picker component for Vue. 这是Vue的 ...
Vue如何自定义组件?超详细Vue自定义组件指南!使用自定义组件减少重复造轮子! ∠( °ω°)／前端知识
文章目录使用意义基础使用给组件添加属性传递事件自定义组件的v-model 剖析v-model原理使用示例插槽使用意义有时候一组HTML代码可能会在多出使用(比如页眉页脚).如果我们把 ...
vue 自定义键盘组件_使用Vue自定义数字键盘组件的方法
这篇文章主要介绍了关于使用Vue自定义数字键盘组件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近做 Vue 开发,因为有不少页面涉及到金额输入,产品老是觉得用原生的 inp ...
vue学习-v-if v-for优先级、data、key、diff算法、vue组件化、vue设计原则、组件模板只有一个根元素、MVC.MVP,MVVM
1:v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能? //在vue页面中同时使用v-for与v-if后,打印渲染函数. console.log(app.$optio ...
【Vue】Vite 组件化开发
文章目录组件化开发一.组件化开发思想二.Vue 组件的构成 2.1 组件组成结构 2.2 组件 template 节点 2.2.1 在 template 中使用指令 2.2.2 在 templa ...
简单了解Vue的自定义组件与生命周期
Vue的自定义组件定义格式 Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 }) 代码解析(详细解释在注解 ...
[vue] vue为什么要求组件模板只能有一个根元素？
[vue] vue为什么要求组件模板只能有一个根元素? '为什么只能有且只有一个根元素'于是我花了二十多分钟去找了一下答案......竟然没有找到答案....好的现在我来说说我的理解,如果有不对的地方 ...
一个vue文件应该有的成分_详解vue为什么要求组件模板只能有一个根元素
我是在知乎上看到的这个问题,转念一想,用了大半年的vue,好像真的没有了解过: '为什么只能有且只有一个根元素' 于是我花了二十多分钟去找了一下答案......竟然没有找到答案.... 好的现在我来说 ...

vue如何编写组件可以通过Vue.use()使用

一般平时用别人的组件时都是通过import引入然后Vue.use()来使用，那么如何让我们写的组件也可以用这种方式使用呢？

1.首先新建一个文件夹例如：Home，然后在该文件中新建两个文件Home.vue和index.js

2.在Home.vue中和往常一样如：

3.接下来是index.js的编写（主要）

4.接下来就可以在main.js中美美的引入你的组件了

5.使用（在App.vue中）

6.效果展示

个人博客https://myml666.github.io

vue如何编写组件可以通过Vue.use()使用相关推荐

最新文章

热门文章