1、什么是全局组件
关于全局组件,大家不用想的太过于复杂,因为组件本身就是一个可重复使用的Vue实例对象,加上一个全局的修饰词,就是说可以在当前文件任意vue实例中使用的Vue实例对象,这个与任何编程语言中的全局变量与局部变量的概念是异曲同工的,纯属个人理解,不喜勿喷。
2、全局组件的定义语法
// 语法---Vue.component('组件名', {组件参数})
Vue.component( id, [definition] )
参数:
{string} id // 组件名称
{Function | Object} [definition] // 组件参数
示例:
Vue.component('praise', {
template: '<button @click="count++">点赞数({{count}})</button>',
data() {
return {
count: 0
}
}
})
3、创建全局组件和Vue实例对象的区别
- 1 组件没有el参数, 原因是组件不会和具体的页面元素绑定
- 2 组件必须有template参数, 原因是组件需要渲染页面, template就是需要渲染的html
- 3 组件也是一个Vue的实例, 所以在组件中也有data/methods等
- 4 data必须是一个函数, 并返回一个对象
4、实例代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 第一步:引入vue.js文件 -->
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 第二步:创建视图v -->
<div id="app">
<!-- 第四步:在视图v中引用全局组件 -->
<praise></praise>
<praise></praise>
<praise></praise>
</div>
</body>
<script>
// 第三步:创建VM,在js中创建全局组件
Vue.component('praise', {
template: '<button @click="count++">点赞({{count}})</button>',
data() {
return {
count: 0
}
}
});
// 创建vue实例
const app = new Vue({
el: '#app',
// 绑定数据模型M
data: {
count: 0
},
methods: {}
});
</script>
</html>
演示代码结果:
5、为什么新建全局组件data必须是一个函数, 并返回一个对象?
大家要知道,如果使用全局组件的话,全局组件中的data的属性如果在内存中使用基本数据类型来进行存储的话,对于复用的全局组件而言,一但其中一个被更改,其他的也同样会被更改;如果我们把属性使用对象进行存储,那么当不同存储位置中的对象属性值被修改的时候,这种修改是不会相互影响的。