zoukankan      html  css  js  c++  java
  • Vue全局添加组件

    在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法:

    1、首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如:

    <template>
        <div>
            loading..............
        </div>
    </template>
    
    <script>
        export default {
    
        }
    </script>
    
    <style scoped>
        div{
            font-size:40px;
            color:#f60;
            text-align:center;
        }
    </style>

    在index.js中,规定了使用这个组件的名字,以及使用方法,如:

    
    import loadingComponent from './loading.vue'
    
    const loading={
        install:function(Vue){
            Vue.component('Loading',loadingComponent)
        }  //'Loading'这就是后面可以使用的组件的名字,install是默认的一个方法
    };
    
    export default loading;

    只要在index.js中规定了install方法,就可以像一些公共的插件一样使用Vue.use()来使用,如:

    import loading from './loading'
    
    Vue.use(loading)

    这是在入口文件中引入的方法,可以看到就像vue-resource一样,可以在项目中的任何地方使用自定义的组件了,比如在home.vue中使用

    <template>
        <div>
            <Loading></Loading>
        </div>
    </template>

    这样就可以使用成功

    原文:http://blog.csdn.net/generon/article/details/72848104

  • 相关阅读:
    【QCon笔记】Native 和 Web 融合
    点透
    测试
    Moom for mac 最棒的窗口管理软件
    Egret白鹭H5小游戏开发入门(三)
    Egret白鹭H5小游戏开发入门(二)
    Egret白鹭H5小游戏开发入门(一)
    关于Canvas模糊的问题
    利用Canvas实现360度浏览
    JS中取整以及随机颜色问题
  • 原文地址:https://www.cnblogs.com/670074760-zsx/p/7049806.html
Copyright © 2011-2022 走看看