根据组件注册的三个步骤:创建组件构造器、注册组件、使用组件,将页面的内容分别抽成school组件(全局组件)和student组件(局部组件)。
时间: 2023-11-24 21:07:22 浏览: 55
根据组件注册的三个步骤,将页面的内容分别抽成school组件(全局组件)和student组件(局部组件)的步骤如下:
1. 创建school组件构造器
```javascript
Vue.component('school', {
template: `
<div>
<h2>学校信息</h2>
<p>学校名称:{{ name }}</p>
<p>学校地址:{{ address }}</p>
</div>
`,
data() {
return {
name: 'ABC学校',
address: '北京市海淀区'
}
}
})
```
2. 注册student组件
```javascript
const student = {
template: `
<div>
<h3>学生信息</h3>
<p>姓名:{{ name }}</p>
<p>年龄:{{ age }}</p>
</div>
`,
data() {
return {
name: '小明',
age: 18
}
}
}
```
3. 使用student组件
```javascript
new Vue({
el: '#app',
components: {
'student': student
}
})
```
在HTML中使用school和student组件:
```html
<div id="app">
<school></school>
<student></student>
</div>
```