O conceito de componentes

O sistema de componentes é Vue.jsum dos conceitos importantes, pois fornece uma abstração que nos permite usar componentes pequenos independentes e reutilizáveis para criar aplicativos grandes. Qualquer tipo de interface de aplicativo pode ser abstraído em uma árvore de componentes:
Insira a descrição da imagem aqui
cada componente é Independentemente um do outro, os componentes precisam ser criados e registrados antes de poderem ser utilizados. O registro é dividido em registro global e registro local.

Registro global

Gramática

Vue.component('component-name', { 
	/* ... */ 
})

Usando o Vue.component()方método, dois parâmetros podem ser passados, o primeiro parâmetro é o nome do componente é recomendada (kebab caso) são nomeados.

Exemplos

<div id="app">
    <component-name></component-name> <!-- 以标签形式使用组件 -->
</div>

<script>
    // 定义一个名为 component-name 的新组件
    Vue.component('component-name', {
        //组件内容写这里
        template: "<div>这是一个全局组件</div>",
    })
    
    //声明一个vue实例
    var vueApp = new Vue({
        el: '#app',
    })
</script>

Assuntos que precisam de atenção

O componente global deve ser gravado antes que a instância do Vue seja criada antes de entrar em vigor no elemento raiz
O primeiro nível no modelo pode ter apenas um rótulo, não paralelo
Componentes datadevem ser funções
Tags serão aninhados HTMLregras restritivas, tais como: <ul>, <ol>, <table>, <select>limitando os elementos pode ser enrolado nele, e alguns, como <option>elementos para que apenas iria aparecer em alguns outros elementos internos

Registro parcial

Gramática

var child={
  template:"<h1>我是局部组件</h1>"
};

new Vue({
  el: "#app1",
  components:{
    "child-component": child
  }
});

Use Vueexemplo, há uma opção componentsregistar assembléia local, após o registro é válida apenas no âmbito instância

Exemplos

<div id="app">
  <child-component></child-component>
</div>

var child = {
   template:"<button @click='add'>我是局部组件:{{m}}</button>",
   data:function(){
     return {m:1}
   },
   methods:{
     add:function(){
       this.m++
     }
   }
 };
 
 new Vue({
   el: "#app",
   components:{
     "child-component": child
   }
 })

Assuntos que precisam de atenção

Componentes locais são registrados no componente pai de chamada e só podem ser usados neste escopo
Componentes globais e componentes locais, os dados também devem ser uma função
Tags serão aninhados HTMLregras restritivas, tais como: <ul>, <ol>, <table>, <select>limitando os elementos pode ser enrolado nele, e alguns, como <option>elementos para que apenas iria aparecer em alguns outros elementos internos