定义
把页面中重复的功能抽离出来封装成一个单独的组件 在任何需要的地方都可以使用该组件 提高复用率 和维护性
注册全局组件
Vue.component(componentName,config)
- componentName 可以使用驼峰 也可以使用 component-name
- 在HTML中引用只能写 -
- 在其他实例中可以直接使用
使用组件
在组件的模板（template） 或 HTML中使用<组件名></组件名>
<div id="app">
<handsome-man></handsome-man>
</div>
Vue.component('handsomeMan', {
data () {
// 注册组件时 data 属性需要用一个函数返回一个对象
return {
msg: 'zfpx'
}
},
template: `<div>{{msg}}</div>`
});
局部组件 只能在当前实例中使用
- 创建组件
- 注册组件
- 使用组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<zhangsan></zhangsan>
<cxk></cxk>
</div>
<script src="vue.js"></script>
<script type="module">
// 局部组件使用三部曲
// 1. 创建组件
// 2. 注册组件
// 3. 使用组件
// import zhangsan from './zhangsan.js';
// import cxk from './cxk.js';
let cxk = {
data() {
return {
content: [
'sing',
'dance',
'rap',
'basketball'
]
}
},
template: `<div>CXK: <span v-for="(item, index) in content" :key="index">{{item}};</span></div>`
};
let zhangsan = {
// 每一个组件都是一个 Vue 的实例，那么每个组件都有自己的生命周期、computed...
data () {
return {
name: 'zhangsan',
arr: []
}
},
methods: {
fn() {
this.name = 'zhangsan'
}
},
template: "<div @click='fn'>{{name}}</div>"
};
let vm = new Vue({
el: '#app',
data() {
return {
x: 1,
y: 2
}
},
components: {
// 注册局部组件，像 zhangsan, cxk 这种被注册的称为子组件，而组件的注册时在的实例称为父组件
zhangsan,
cxk
}
})
</script>
</body>
</html>
组件嵌套
创建一个组件 ===》 在对应父组件中进行注册===》在父组件中的标签中直接嵌套子组件的标签名
