前言常规组件声明与注册

// 定义一个名为 button-counter 全局注册的组件
Vue.component("button-counter", {
 template: 'You clicked me {{ count }} times.',
 data() {
  return {
   count: 0
  }
 }
});

new Vue({
 template: `
  

   
App Component
   
  
 `
}).$mount("#app");官方文档中我们可以看到，我们可以通过 Vue.component('component-name') 的方式来注册一个组件。

{Element | string} [elementOrSelector]

{boolean} [hydrating]

Returns: vm - the instance itself

Usage:

If a Vue instance didn't receive the el option at instantiation, it will be in “unmounted” state, without an associated DOM element. vm.$mount() can be used to manually start the mounting of an unmounted Vue instance.

If elementOrSelector argument is not provided, the template will be rendered as an off-document element, and you will have to use native DOM API to insert it into the document yourself.

The method returns the instance itself so you can chain other instance methods after it.
// 定义一个名为 button-counter 全局注册的组件
Vue.component("button-counter", {
 template: 'You clicked me {{ count }} times.',
 data() {
  return {
   count: 0
  }
 }
});

new Vue({
 template: `
  

   
App Component
   click to insert button-counter comonent
   

  
 `,
 methods: {
  insert() {
   const ButtonCounter = Vue.component("button-counter"); // 只能查找到全局注册到组件
   const instance = new ButtonCounter();
   instance.$mount("#insert-container");
  }
 }
}).$mount("#app");
const ButtonCounterComponent = {
 template: 'You clicked me {{ count }} times.',
 data() {
  return {
   count: 0
  }
 }
};

new Vue({
 template: `
  

   
App Component
   click to insert button-counter comonent
   

  
 `,
 methods: {
  insert() {
   const ButtonCounter = Vue.extend(ButtonCounterComponent);
   const instance = new ButtonCounter();
   instance.$mount("#insert-container");
  }
 }
}).$mount("#app");


总结

至此，我们知道了，全局组件动态注册 和 局部组件动态注册 的使用方法和注意事项，我们可以结合实际情况去选择不同方案进行搭配即可。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对自学php网的支持。