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>