vue2.0 常用组件创建

最新推荐文章于 2025-04-04 09:48:34 发布

一个程序

最新推荐文章于 2025-04-04 09:48:34 发布

阅读量309

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/jibuyueqian/article/details/125265839

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Vue2.0中三种常见的组件创建方法：1) 使用Vue.extend()构造器；2) 组件的全局和局部注册；3) 利用template创建组件，这是项目中常用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一

使用Vue.extend() 构造器写法

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例，需要注意 - 在Vue.extend()中它必须是函数

<div id="mount-point"></div>

 var WayONe = Vue.extend({
  template: '<p>{{data}}</p>',
  data: function () {
    return {
      data: '这里是方法一',
    }
  }
})
new WayONe().$mount('#mount-point')

方法二

使用 component

全局注册

<div id="components-demo">
    <way-two></way-two> 
</div>

Vue.component('way-two', { // way-two 是注册组件的名称
  data () {
    return {
      dataTwo: '这里是方法二'
    }
  },
  template: '<p>{{dataTwo}}</p>'
})
// 挂载
new Vue({ el: '#components-demo' })

局部注册

<div id="components-demo">
    <component-a></component-a>
</div>

var ComponentA = {
  data() {
    return {
      dataTwo: '这里是方法二errrr'
    }
  },
  template: '<p>{{dataTwo}}</p>'
}
// 挂载
new Vue({ 
  el: '#components-demo',
  components: {
   'component-a': ComponentA,
  }
})