【Vue】组件注册

目录

• ​​1. 全局注册​​
• ​​2. 局部注册​​
• ​​3. 其他问题​​

组件的名称有两种写法：

短横线分隔命名法（例如：my-component-name）和

驼峰命名法（例：MyComponentName）

1. 全局注册

Vue.component('component-a', {
   template:`
   <div >
   <button v-on:click="handle()"> 加一</button>
   <p>{{ count }}</p>
   </div>
   `,
   data:function(){
     return {
     count:0
     }
   },
   methods:{
     handle(){
       count++
     }
   }
})

这样的组件就是全局注册的，他们在注册之后，就可以用在根组件的模板中，这些全局组件也可以在内部互相使用：

// 根组件模板
<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

// Vue实例，全局组件注册
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

// 创建根实例
new Vue({ el: '#app' })

2. 局部注册

方式一： 使用普通JavaScript对象注册组件

// 局部组件，之间不能相互引用
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

// 如果想让B组件引用A组件
var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

方式二： 同步注册

import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  // ...
}

方式三: 异步注册（懒加载）

export default{
    components:{
        myComponent: resolve => require(['./componentA.vue'],resolve)
    }
}

3. 其他问题

（1）解决​​template​​内容过多的问题

方法一：引入外部文件

// 在static文件中建立my_component.html文件,内容如下：
<h3 @click="handleClick">{{ title }}</h3>

// 组件
Vue.component('my-component', (resolve, reject) =>{
    axios.get("../static/my_component.html").then(res =>{
        resolve({
            template: res,
            props: {
                title: {
                    type: String,
                    default: '全局组件',
                }
            },
            methods: {
                handleClick() {
                    alert(this.title)
                }
            },
        })
    });
});

方法二：使用​​<script type="x-template">​​ 标签处理模板

<div id="app">
    <vut-button></vut-button>
</div>
<script type="x-template" id="myComponent">
    <div class="myButton">
        <span>我是Button组件</span>
    </div>
</script>

<script>
    Vue.component("myButton", {
        template: "#myComponent"
    })
    new Vue({
        el: "#app"
    })
</script>

（2） 组件中的​​data​​必须是一个函数

data: function () {
  return {
    count: 0
  }
}

（3）在组件的模板中，只能有一个根标签