註冊全局組件(H5) 任意頁面使用

在view下建立components文件夾。
在components下建立文件夾base.
base文件夾是用來存放 基礎組件的。
好比說頁面中不少處都在使用的公共組件 
如你須要自定義的按鈕

在components下新建index.js
用來導出你自定義的組件
這樣在任意頁面就可使用組件了

index.js和base同級的

base下的search.vue組件css

<template>
    <div class="test">
        <h1>我是一個組件</h1>
        <div>我這個組件能夠全局使用的</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    }
}
</script>

<style lang="scss" scoped>
.test {
    background: pink;
    padding: 10px;
    text-align: center;
}
</style>

在components下新建index.jsvue

import com from "./base/search.vue";
export default (Vue) => {
  Vue.component("com", com);
};

==========
另一種
function aa(Vue) {
  Vue.component("com", com);
}
export default aa;

在main.js中掛載code

import com from "./components";
Vue.use(com);

在XXX.vue直接使用component

<template>
    <div>
      <com></com>
   </div>
</template>

相關文章
相關標籤/搜索