Vue.js（5）- 全局组件-优快云博客

本文深入讲解Vue中全局组件的定义与使用方法，包括组件的语法、配置对象的使用，以及如何在页面上引入和使用这些组件。同时，文章对比了组件与Vue实例的区别，如data属性的定义方式和UI结构的指定等。

全局组件

定义组件的语法
- Vue.component('组件的名称', { 组件的配置对象 })
- 在组件的配置对象中：可以使用 template 属性指定当前组件要渲染的模板结构；
使用组件的语法

把 组件的名称, 以标签的形式，引入到页面上就行；

// 导入vue，挂载组件
import Vue from 'vue/dist/vue.js'
// 使用 Vue.component('字符串组件名称', { /*组件的配置对象*/ }) 定义全局组件
// 每个组件必须有唯一的根元素进行包裹
Vue.component('my-com1',{
  template: `<div>
    <div>这是自定义全局组件 my-com1</div>
    <p>这是来捣乱的</p>
    <h1 @click="show">{{msg}}</h1>
  </div>`,
    // 组件 data 必须是一个function，return一个对象
  data: function() {
    return {
      msg: 'my-com1'
    }
  },
  methods: {
    show() {
      console.log('调用了 my-com1 的show方法')
    }
  },
  created() {
    console.log('执行了组件 中 create生命周期函数');
    console.log(this.msg);
    console.log(this.show);
  },
})

其他

可以认为：组件是特殊的Vue实例；

组件和实例的相同和区别：

组件中的 data 必须是一个 function 并 return 一个字面量对象；在 Vue 实例中，实例的 data 既可以是对象，可以是方法；
组件中，直接通过 template 属性来指定组件的UI结构；在 Vue 实例中，通过 el 属性来指定实例控制的区域；但是实例也可以使用 template;
组件和实例，都有自己的生命周期函数，私有的过滤器，methods 处理函数；

转载于:https://www.cnblogs.com/houfee/p/9953935.html