欢迎来到[自学php网] ①群 287460651

主页 > 前端 > vue教程 >

Vue动态创建注册component的实例代码

来源:自学PHP网    时间:2019-07-23 15:24 作者:小飞侠

[导读] Vue动态创建注册component的实例代码...

前言常规组件声明与注册

// 定义一个名为 button-counter 全局注册的组件
Vue.component("button-counter", {
 template: '',
 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: '',
 data() {
  return {
   count: 0
  }
 }
});

new Vue({
 template: `
  

App Component

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

new Vue({
 template: `
  

App Component

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


总结

至此,我们知道了,全局组件动态注册 和 局部组件动态注册 的使用方法和注意事项,我们可以结合实际情况去选择不同方案进行搭配即可。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对自学php网的支持。

最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com