vue中怎么定义全局组件？

那么vue中怎么定义全局组件？

方法1

全局组件用到的是 Vue.component(tagName,option)，tagName是自定义的组件名称,option是组件构造器。具体使用方法如下：

在main.js中设置：

Vue.component('my-component', {
  template: '<button v-on:click="clickShow">切换<h1 v-show="show">全局组件的学习</h1></button>',
  data () {
    return {
      show: true
    }
  },
  methods:{
    clickShow(){
      this.show = !this.show
    }
  }
})

在组件中直接引用：

<template>
  <div>
    <my-component ></my-component>
  </div>
</template>

渲染结果为：

方法2

Vue.extend(options) ，Vue.extend返回的是一个“扩展实例构造器”，不是具体的组件实例，也就是预设了部分选项的Vue的实例构造器，它常常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂在到自定义元素上.

在main.js中设置：

var Profile = Vue.extend({
  template: '<button v-on:click="show=!show">切换<h1 v-show="show">全局组件的学习</h1></button>',
  data: function () {
    return {
      show: true
    }
  }
})
 Vue.component('my-component',Profile)
//Vue.component 是用来全局注册组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件

同上直接引用，渲染结果同上。

注：data 在 Vue.extend()中它必须是函数。

更多vue.js相关知识，可访问 Vue.js答疑 栏目！！

以上就是vue中怎么定义全局组件？的详细内容，更多请关注0133技术站其它相关文章！