「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」。
组件化和全局组件
组件: 把页面中重复的功能抽离出来封装成一个单独的组件,在任何需要的地方使用该组件即可;提高代码的可复用程度和可维护性;
每个组件都是一个 vue 的实例,那么这个组件也有自己的生命周期,并且也有 data, computed,methods,watch等 这些属性,每个组件都有自己的私有的数据;还可以接收来自上层组件传入的数据;
- 注册全局组件
vue.component(componentName,config)- componentName 可以使用驼峰,也可以使用 component-name
- 但是 HTML 中引用只能写 component-name
- vue.component 是全局注册组件,可以在各个 vue 实例中直接使用
- 使用组件
- 在组件的模板(template)或者(HTML)中使用 <组件名></组件名>
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<handsome-man></handsome-man>
</div>
<div id="app2">
<handsome-man></handsome-man>
</div>
<script src="vue.js"></script>
<script>
// 组件：把页面中重复的的功能抽离出来封装成一个单独的组件，在任何需要的地方使用该组件即可；
// 每个组件都是一个 Vue 的实例，那么这个组件也有自己的生命周期，并且也有data、computed、methods、watch这些属性，每个组件都有自己私有的数据；还可以接受来自上层组件传入的数据；
// 注册一个组件：
// 全局组件 Vue.component(componentName, config)
// 1. componentName 可以使用驼峰，也可以使用 component-name
// 2. 但是在HTML中引用时只能写 -
// 3. Vue.component 是全局注册组件，在其他各个 Vue 实例中可以直接使用
Vue.component('handsomeMan', {
data() {
// 注册组件时 data 属性需要用一个函数返回一个对象
return {
msg: '来学习了?'
}
},
template: `<div>{{msg}}</div>`
});
let vm1 = new Vue({
el: '#app',
data: {}
});
let vm2 = new Vue({
el: '#app2',
data: {}
});
</script>
</body>
</html>
局部组件
- 局部组件是只能在当前 vue 实例中使用的组件需要在当前组件的 components 属性进行注册;
- 使用局部组件的步骤
- 创建组件
- 注册组件
- 使用组件
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<xiaofei></xiaofei>
<dafei></dafei>
</div>
<script src="vue.js"></script>
<script type="module">
// 局部组件使用三部曲
// 1. 创建组件
// 2. 注册组件
// 3. 使用组件
// import xiaofei from './xiaofei.js';
// import dafei from './dafei.js';
let dafei = {
data() {
return {
name: 'dafei',
content: [
'sing',
'dance',
'rap',
'basketball'
]
}
},
methods: {
fn() {
this.name = "大飞";
this.content = ["唱", "跳", "说唱", "篮球"];
}
},
template: `<div @click='fn'>{{name + "特长"}}: <span v-for="(item, index) in content" :key="index">{{item}};</span></div>`
};
let xiaofei = {
// 每一个组件都是一个 Vue 的实例，那么每个组件都有自己的生命周期、computed...
data() {
return {
name: 'xiaofei',
arr: []
}
},
methods: {
fn() {
this.name = '小飞';
}
},
template: "<div @click='fn'>{{name}}</div>"
};
let vm = new Vue({
el: '#app',
data() {
return {
x: 1,
y: 2
}
},
components: {
// 注册局部组件，像 xiaofei, dafei 这种被注册的称为子组件，而组件的注册时在的实例称为父组件
xiaofei,
dafei
}
})
</script>
</body>
</html>
