### 回答1：
原生的
Vue.js 和 ElementUI.
js 可以
使用以下方法来实现复用 header 组件：
1. 建立一个 header 组件文件，在文件
中创建一个
Vue 组件，包括 template、script 和 style 三个部分。
2. 在其他组件
中引用这个 header 组件，可以
使用 Vue 的组件化机制来实现。
例如，建立一个名为 Header 的组件：
```
<template>
<div class="header">
<!-- header 组件的内容 -->
</div>
</template>
<script>
export default {
name: 'Header',
// 组件的选项
}
</script>
<style>
/* header 组件的样式 */
</style>
```
在其他组件
中引用 Header 组件：
```
<template>
<div class="other-component">
<Header />
<!-- 其他组件的内容 -->
</div>
</template>
<script>
import Header from './Header.
vue'
export default {
name: 'OtherComponent',
components: {
Header
}
}
</script>
```
这样，你就可以在其他组件
中复用 Header 组件了。
注意：如果你
使用的是 ElementUI.
js，你还需要在 main.
js 中导入 ElementUI，并调用
Vue.use(ElementUI) 来
使用 ElementUI 的组件。
### 回答2：
在
原生的
vue.js和elementui.
js中，即使不
使用组件的情况下，也可以实现header的复用。下面是一个可能的实现方法：
1. 首先，在
vue.js的
实例中，定义一个header组件的对象，用于存储header的相关数据和方法。例如：
```
javascript
var headerComponent = {
data: function() {
return {
headerText: 'Page Header'
};
},
methods: {
handleClick: function() {
console.log('Clicked on header');
}
},
template: `
<header>
<h1>{{ headerText }}</h1>
<button @click="handleClick">Click Me</button>
</header>
`
};
```
2. 在需要
使用header的
vue实例中，通过将header组件对象添加到该
实例的`components`选项
中，即可在模板
中引用header组件。例如：
```
javascript
new
Vue({
el: '#app',
components: {
'app-header': headerComponent
}
});
```
```html
<div id="app">
<app-header></app-header>
<!-- 页面内容 -->
</div>
```
这样，header组件就可以在多个
vue实例中进行复用了。可以根据具体需求，修改header组件的数据和方法，以满足不同页面的需求。
需要注意的是，以上方法并没有直接
使用elementui.
js，而是只
使用了
vue.js原生的功能。如果需要进一步修改样式，可以在相应的CSS文件
中添加样式规则。
### 回答3：
如果不
使用组件，即只
使用原生的
vue.js和elementui.
js来实现header的复用，可以按照以下步骤进行操作：
1. 在项目
中创建一个单独的
vue组件，命名为Header.
vue，该组件负责展示header的内容和样式。
2. 在Header.
vue组件
中，可以
使用elementui.
js提供的组件或样式来实现header的布局和样式设计。比如可以
使用el-row和el-col来进行栅格布局，
使用el-menu和el-menu-item来实现菜单导航等功能。
3. 在Header.
vue组件
中，通过
vue的数据绑定和事件监听机制，可以实现header的
动态展示和交互功能。比如可以通过定义data属性来
动态显示登录用户信息，通过定义methods方法来响应用户点击事件。
4. 在需要
使用header的页面
中，可以通过引入Header.
vue组件来复用header。可以
使用vue.js的import语句导入Header.
vue组件，然后在页面
中使用<Header></Header>标签进行调用。
5. 在实际
使用中，可以通过修改Header.
vue组件的props属性来实现不同页面
中header的差异化展示。比如可以通过props接收不同页面传递的参数，从而
动态展示不同的内容和样式。
通过上述步骤，即可在
原生的
vue.js和elementui.
js中实现header的复用功能。虽然没有
使用组件，但是仍然可以通过
vue的特性和elementui.
js提供的样式和组件来实现header的灵活
动态展示。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
7272
