自定义组件
Posted zhangmingyan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义组件相关的知识，希望对你有一定的参考价值。
vue组件文件
基本模板
<!--html代码：有且只有一个根标签-->
<template>
<div class="owen">
</div>
</template>
<!--js代码：在export default 的括号内完成组件的各项成员：data|methods|... -->
<script>
export default
</script>
<!--css代码：scoped样式组件化 - 样式只在该组件内部起作用 -->
<style scoped>
</style>自定义组件
components/OwenComponent.vue
<!-- components/OwenComponent.vue -->
<!--html代码：有且只有一个根标签-->
<template>
<div class="owen">
<h1 :class="active: is_active" @click="btnClick">owen组件</h1>
</div>
</template>
<!--js代码：在export default 的括号内完成组件的各项成员：data|methods|... -->
<script>
export default
data ()
return
is_active: false
,
methods:
btnClick()
this.is_active = !this.is_active;
</script>
<!--css代码：scoped样式组件化 - 样式只在该组件内部起作用 -->
<style scoped>
.active
color: red;
</style>views/About.vue
```vue
```## vue组件文件 components/OwenComponent.vue views/About.vue 以上是关于自定义组件的主要内容，如果未能解决你的问题，请参考以下文章
This is an about page
好
<!-- 使用组件 -->
<owen-comp></owen-comp>
<OwenComp></OwenComp>
</div>
基本模板
<!--html代码：有且只有一个根标签-->
<template>
<div class="owen">
</div>
</template>
<!--js代码：在export default 的括号内完成组件的各项成员：data|methods|... -->
<script>
export default
</script>
<!--css代码：scoped样式组件化 - 样式只在该组件内部起作用 -->
<style scoped>
</style>自定义组件
<!-- components/OwenComponent.vue -->
<!--html代码：有且只有一个根标签-->
<template>
<div class="owen">
<h1 :class="active: is_active" @click="btnClick">owen组件</h1>
</div>
</template>
<!--js代码：在export default 的括号内完成组件的各项成员：data|methods|... -->
<script>
export default
data ()
return
is_active: false
,
methods:
btnClick()
this.is_active = !this.is_active;
</script>
<!--css代码：scoped样式组件化 - 样式只在该组件内部起作用 -->
<style scoped>
.active
color: red;
</style><!-- views/About.vue -->
<template>
<div class="about">
<h1>This is an about page</h1>
<h2>好</h2>
<!-- 使用组件 -->
<owen-comp></owen-comp>
<OwenComp></OwenComp>
</div>
</template>
<script>
// import OwenComp from '../components/OwenComponent'
import OwenComp from '@/components/OwenComponent' // 导入组件，组件名随意
export default
components:
OwenComp, // 注册组件
</script>