vue component組件使用

Vue.component使用

 

一：

新建一個 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"; // 注冊組件 
Vue.component('component-moke1', componentmoke1); // 參數一：作為標簽的組件名，參數二：引入的組件名

 

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

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

<script>
</script>

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

 

如果不使用全局，在頁面中 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 創建

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

// 參數一： 作為標簽的組件名， 參數二： data() 必須為函數， 參數三： template模板 組件里的內容
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>