Uso do componente Vue

Uso do componente

 

Um:

Crie um novo  arquivo component-moke1.vue

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

<script>   
</ script> 

<style escopo lang = "menos"> 
.component - moke1 { 
    ... 
}
 < / style>

 

 Introduzido globalmente no main.js

// arquivo main.js 
import Vue de 'vue'     // caminho import componentmoke1 
import componentmoke1 from "./moke/component-moke1.vue" ; // registra componente 
Vue.component ('component-moke1', componentmoke1); // Parâmetro 1: o nome do componente como rótulo, parâmetro 2: o nome do componente introduzido

 

Em seguida, use-o diretamente nos componentes necessários

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

<script> 
</ script > 

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

 

Se você não usar o global,  introduza-o nos componentes da página

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

<script> 
    
    importar Vue de 'vue' 
    importar componentmoke1 de '../../components/component-moke1'; // 子组件
    
    exportação padrão { 
        dados () { 
            return {} 
        }, 

        componentes: {
             "componentmoke1" : componentmoke1, 
        }, 
    }
 </ script> 

<style> 
</ style>

 

Dois:

Crie diretamente com 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>