vue的export default怎么用
时间: 2024-05-18 16:09:48 浏览: 87
解决vue中修改export default中脚本报一大堆错的问题
在Vue.js中,我们可以使用`export default`来导出一个Vue组件。这个组件可以被其他组件引用并渲染到页面上。
下面是一个示例组件的代码:
```javascript
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, World!'
}
}
}
</script>
```
在这个示例组件中,我们使用`export default`导出了一个对象。这个对象包含了组件的选项,例如数据、计算属性、生命周期钩子等等。在其他组件中,我们可以通过`import`语句引入这个组件并在模板中使用它:
```javascript
<template>
<div>
<my-component></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
}
}
</script>
```
在这个示例中,我们通过`import`语句引入了`MyComponent.vue`文件,并将其注册为当前组件的子组件。这样就可以在模板中使用`<my-component></my-component>`标签来渲染这个组件了。
阅读全文