在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法:
1.首先新建一个loading.vue文件
// Cmponent.vue <template> <div> ...loading </div> </template> <script> export default { } </script> <style scoped> div{ font-size:40px; color:#fbb; text-align:center; } </style>
其次在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件
import LoadingComponent from ‘./loading.vue‘ const loading= { install:function(Vue){ Vue.component(‘LoadingComponent‘,component) } //‘component-name‘这就是后面可以使用的组件的名字,install是默认的一个方法 } export default Loading
3.在main.js里面引入
import Loading from ‘./compontents/loading‘ vue.use(Loading); new Vue({ el:‘#app‘, render:h=>h(App) })
4.使用
最后你可以在任何想用这个组件的地方插入<Loading></Loading>了 组件相应的样式和js代码可以直接写在第一步中的文件之中!就这样一个自己创建的组件就这么愉快的应用啦!
原文地址:https://www.cnblogs.com/lianxisheng/p/10626438.html
时间: 2024-10-07 06:47:56