Vue.component使用

一：

新建一個(gè) component-moke1.vue 文件

<template>
    <div class="component-moke1">
           子組件 componentmoke1
    </div>    
</template>

<script>  
</script>

<style scoped lang="less">
.component-moke1{
    ...
}
</style>

在** main.js** 中全局引入

// main.js文件
import Vue from 'vue'    

// 路徑引入組件componentmoke1
import componentmoke1 from "./moke/component-moke1.vue";

// 注冊(cè)組件 
Vue.component('component-moke1', componentmoke1); // 參數(shù)一：作為標(biāo)簽的組件名，參數(shù)二：引入的組件名

然后直接在需要的組件中使用

<template>
　　<div class="page-index" >
   　　 <!-- 引入組件 component-moke1 -->
    　　<component-moke1></component-moke1>
　　</div>
</template>

<script>
</script>

<style>
.page-index{
    ...
}
</style>

如果不使用全局，在頁(yè)面中 components 中引入

<template>
    <div class="page-index">
        <!-- 引入組件 -->
        <component-moke1></component-moke1>
    </div>
</template>

<script>
    
    import Vue from 'vue'
    import componentmoke1 from '../../components/component-moke1'; // 子組件
    
    export default {
        data(){
            return {}
        },

        components: { 
            "component-moke1":componentmoke1,
        },
    }
</script>

<style>
</style>

二：

直接用 js 創(chuàng)建

// main.js文件
import Vue from 'vue' 
// 參數(shù)一： 作為標(biāo)簽的組件名， 參數(shù)二： data() 必須為函數(shù)， 參數(shù)三： template模板 組件里的內(nèi)容
Vue.component('button-counter', {　
  data(){
    return {
      count: 0
    }
  },
  template: '<button id="count" v-on:click="count++">You clicked me {{ count }} times.</button>' 
})

在需要的組件中使用

<template>
　　<div class="page-index" >
   　　 <!-- 引入組件 button-counter -->
    　　<button-counter></button-counter>
　　</div>
</template>

<script>
</script>

<style>
.page-index{
    ...
}
</style>