自定义组件

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

<!-- 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>

```## vue组件文件

##### 基本模板

```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

<!-- 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>