vue.js 定义全局组件和局部组件的方法

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。我们经常会自定义很多组件以满足我们不同的需求。

一.自定义全局组件

方法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>

渲染结果为：

image

方法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()中它必须是函数。

二.局部组件使用

1. 在文件夹conponents下创建自定义的组件MyComponent.vue，组件样式为：

template>
  <div>
    <button v-on:click="show=!show">切换
      <h1 v-show="show">全局组件的学习</h1>
    </button>
  </div>
</template>

2. 需要的地方引入和使用组件

components: {
    'my-component': MyComponent
  },

<template>
  <div>
    <MyComponent></MyComponent>
  </div>
</template>

注: 组件内容过多情况下使用局部组件使代码更加清晰明了！

使用组件容易遇到问题：https://www.jianshu.com/p/b951ae75bd98

子父组件问题：https://vip.kingdee.com/article/8622