欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue.extend

程序员文章站 2024-03-04 16:41:29
...

Vue.extend

1.传递的参数

Vue.extend({Object}),传递的是一个对象,这个对象包含template等,其实就是传递一个包含组件选项的对象。

他是属于Vue的全局API,用来创建一个Vue的"子类"。

2.使用

2.1 直接用来挂载元素

Vue.extend({Object})放回的是一个构造器,data要写成组件的函数形式,因为创建的是构造器,并非实例,所以要使用这个组件就必须new出来,并通过KaTeX parse error: Expected 'EOF', got '#' at position 8: mount('#̲mount-point')进行…mount()等同于el属性。

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}}</p>',
  data: function () {
    return {
      firstName: 'Wang',
      lastName: 'wu',
    }
  }
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')

//结果:
//<div id="mount-point"></div>
//<p>Walter White aka Heisenberg</p>
2.2 或者用来创建组件
//创建Vue对象
var vue = new Vue({
    el:'mount-point'
})

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}}</p>',
  data: function () {
    return {
      firstName: 'Wang',
      lastName: 'wu',
    }
  }
})

//也可以这样使用,通过传入构造器和指定组件名'my-component',注册一个全局组件
Vue.component('my-component', Profile)

//结果:我就可以在vue实例挂载的元素中,使用我的组件了
//<div id="mount-point"><my-component></my-component></div>

相关标签: wed前端 vue js