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 处理函数；