目录
本文主要介绍Vue.js中组件的注册使用,包括组件的全局和局部注册。
1.全局注册
(1)语法
Vue.component(组件名, {
data: function() {
return {
数据
}
},
template: 模板内容,
methods: {
方法
}
})
(2)实例
以两个组件注册为例,分别实现点击加1以及开关灯的功能。
代码如下:
a.按钮点击加1
Vue.component('button-counter', {
data: function() {
return {
count: 0
}
},
template: `
<div>
<button @click='addOne' v-text='"点击了"+count+"次"'></button>
<ButtonSwitch></ButtonSwitch>
<button-switch></button-switch>
</div>
`,
methods: {
addOne() {
this.count++;
}
}
})
b.开关灯
Vue.component('ButtonSwitch', {
data: function() {
return {}
},
template: `
<div>
<button @click='colorChange' v-text='"开关灯"'></button>
</div>
`,
methods: {
colorChange() {
if (document.body.style.backgroundColor == 'white') {
document.body.style.backgroundColor = 'black'
} else {
document.body.style.backgroundColor = 'white'
}
}
}
})
2.局部注册
(1)语法
let 变量名 = {
data: function() {
return {
数据
}
},
template: 模板,
methods: {
方法
}
};
let vm = new Vue({
el: '#app',
data: {},
components: {
组件名: 变量名
}
})
(2)实例
注册点击背景颜色更改的组件
let c = {
data: function() {
return {
color: 'orange'
}
},
template: `
<button @click='changeColor'>点击变色</button>
`,
methods: {
changeColor: function($event) {
$event.target.style.backgroundColor = this.color
}
}
};
let d = {
data: function() {
return {
color: 'skyblue'
}
},
template: `
<button @click='changeColor'>点击变色</button>
`,
methods: {
changeColor: function($event) {
$event.target.style.backgroundColor = this.color
}
}
};
let vm = new Vue({
el: '#app',
data: {},
components: {
'button-change': c,
'ButtonChange1': d
}
})
3.注意事项
(1)data是函数
(2)模板必须是一个根元素
(3)在普通标签中书写驼峰命名是不可以的
(4)局部组件只能在注册它的父组件中使用
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 注意事项:1.data是函数;2.模板必须是一个根元素; 3.在普通标签中书写驼峰命名是不可以的-->
<div id="app">
<!-- 全局注册 -->
<button-counter></button-counter>
<hr>
<button-switch></button-switch>
<hr>
<!-- 局部注册 -->
<button-change></button-change>
<button-change></button-change>
<hr>
<button-change1></button-change1>
<button-change1></button-change1>
</div>
<script src="./vue.min.js"></script>
<script>
document.body.style.backgroundColor = 'white';
// 全局注册组件
Vue.component('button-counter', {
data: function() {
return {
count: 0
}
},
template: `
<div>
<button @click='addOne' v-text='"点击了"+count+"次"'></button>
<ButtonSwitch></ButtonSwitch>
<button-switch></button-switch>
</div>
`,
methods: {
addOne() {
this.count++;
}
}
})
Vue.component('ButtonSwitch', {
data: function() {
return {}
},
template: `
<div>
<button @click='colorChange' v-text='"开关灯"'></button>
</div>
`,
methods: {
colorChange() {
if (document.body.style.backgroundColor == 'white') {
document.body.style.backgroundColor = 'black'
} else {
document.body.style.backgroundColor = 'white'
}
}
}
})
// 局部注册组件:只能在注册它的父组件中使用。例如这里的button-change只能在#app对应的组件中使用
let c = {
data: function() {
return {
color: 'orange'
}
},
template: `
<button @click='changeColor'>点击变色</button>
`,
methods: {
changeColor: function($event) {
$event.target.style.backgroundColor = this.color
}
}
};
let d = {
data: function() {
return {
color: 'skyblue'
}
},
template: `
<button @click='changeColor'>点击变色</button>
`,
methods: {
changeColor: function($event) {
$event.target.style.backgroundColor = this.color
}
}
};
let vm = new Vue({
el: '#app',
data: {},
components: {
'button-change': c,
'ButtonChange1': d
}
})
</script>
</body>
</html>