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>