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>
