组件分为
全局组件
-
局部组件
全局组件
-
// 语法---Vue.component('组件名', {组件参数})
Vue.component('com1', {
template: '<button @click="count++">你点了我{{count}}次</button>',
data() {
return {
count: 0
}
}
})示例：
<!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>我是测试vue</title>
<!-- 01-引入vue -->
<script src="./node_modules/vue/dist/vue.js"></script>
</head> <body>
<!-- 02创建一个div，ID为app -->
<div id="app"> <!-- 02-使用组件 --><com></com>
</div>
<script>//01-创建全局组件
Vue.component('com', {
template: '<button @click="add">你点击了我{{count}}次</button>',
data() {
return {
count: 0
}
},
methods: {
add() {
this.count++
}
}
})
const vm = new Vue({
el: '#app',//对应的操作区，必填
data: {
msg: ''
},//数据
methods: {}//方法
});
</script>
</body> </html>说明：
-
组件没有el参数, 原因是组件不会和具体的页面元素绑定
组件必须有template参数, 原因是组件需要渲染页面, template就是需要渲染的html
组件也是一个Vue的实例, 所以在组件中也有data/methods等
data必须是一个函数, 并返回一个对象
局部组件
组件的html部分是在template标签中渲染
组件的js部分就是组件参数(对象)
示例：
<!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>
<script src="./node_modules/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<!-- 04-使用组件 -->
<son></son>
<abc></abc>
</div> <!-- 02-局部组件的样式在这里实现 -->
<template id="jubu">
<div>
<button @click="count++">你点击了{{count}}次</button>
</div>
</template> <script>
//01-定义局部组件
const jubu = {
template: '#jubu',
data() {
return {
count: 0
}
},
} const vm = new Vue({
el: '#app',
data: {},
methods: { },
//03- 挂载局部组件
components: {
// 定义组件---组件名：组件参数对象
son: jubu,
abc: jubu
}
});
</script>
</body> </html>