vue如何编写组件可以通过Vue.use()使用
2019-01-24 16:39
776 查看
一般平时用别人的组件时都是通过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.效果展示
相关文章推荐
- 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
- 将自己写的vue组件整理成插件,通过vue.use来使用
- 如何在vue中使用less写组件模块的的样式,通过继承来简化代码
- SQL Server 阻止了对组件 'Ole Automation Procedures' 的 过程'sys.sp_OACreate' 的访问,因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用 sp_configur
- SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问,因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用 s
- SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问,因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用 s
- 如何在VC++ 编写的组件中使用 ADO
- SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访问,因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用 sp_co
- 详解如何使用Node.js编写命令工具――以vue-cli为例
- vue如何在自定义组件中使用v-model
- 如何使用一个不错的图表组件WebChart(免费) 用c#编写
- Vue系列: 如何通过组件的属性props设置样式
- SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问,因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用 sp_configure 启用 'Ad Hoc Distributed Queries'。有关启用 'Ad Hoc Distributed Que
- vue父组件通过props如何向子组件传递方法详解
- Vue全局组件开发,Vue.use(xxx)一次引入,全局使用 【Vue 非父子组件通信】
- 自定义vue全局组件use使用
- 如何使用sublime3愉快的编写vue项目(踩坑总结)
- SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问,因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用 sp_configure 启用 'Ad Hoc Distributed Queries'。有关启用 'Ad Hoc Distributed Queries' 的详细信息
- TestNG如何修改运行结果(通过使用监听器和报表器,可以很轻松的生成自己的TestNG报表)
- Vue系列: 如何通过组件的属性props设置样式