Vue.js（5）- 全局组件

全局组件

1. 定义组件的语法

   • Vue.component('组件的名称', { 组件的配置对象 })

   • 在组件的配置对象中：可以使用 template 属性指定当前组件要渲染的模板结构；

2. 使用组件的语法

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

// 导入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实例；

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

1. 组件中的 data 必须是一个 function 并 return 一个 字面量对象；在 Vue 实例中，实例的 data 既可以是 对象，可以是 方法；

2. 组件中，直接通过 template 属性来指定组件的UI结构；在 Vue 实例中，通过 el 属性来指定实例控制的区域；但是实例也可以使用 template;

3. 组件和实例，都有自己的生命周期函数，私有的过滤器，methods 处理函数；