Uso de componentes Vue

Uso de componentes Vue.com

 

Uno:

Crear un nuevo  archivo componente-moke1.vue

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

<script>   
</script> 

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

 

 Introducido globalmente en main.js

// archivo main.js 
import Vue desde 'vue'     // ruta importar componente componentmoke1 
import componentmoke1 desde "./moke/component-moke1.vue" ; // registrar componente 
Vue.component ('component-moke1', componentmoke1); // Parámetro 1: el nombre del componente como etiqueta, parámetro 2: el nombre del componente introducido

 

Luego úselo directamente en los componentes requeridos

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

<script> 
</ script > 

<style> 
.page - índice { 
    ... 
}
 </style>

 

Si no usa el global,  introdúzcalo en los componentes de la página

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

<script> 
    
    import Vue from 'vue' 
    importar componentemoke1 desde '../../components/component-moke1'; // 子 组件
    
    exportar predeterminado { 
        data () { 
            return {} 
        }, 

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

<style> 
</style>

 

Dos:

Crea directamente con 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>