07.vue组件-component

一.什么是组件化开发

组件化开发:根据封装的思想,把页面上可重用的UI结构封装为组件,方便项目的开发和维护
vue是一个支持组件化开发的前端框架。
vue 中规定:组件的后缀名是.vue。之前接触到的App.vue文件本质上就是一个vue的组件

二.vue组件的构成

分为三部分
template ->组件的模板结构

<template>
    <div>
        <h1>用于用户自定义结构,只能有一个根节点</h1>
    </div>
</template>

script ->组件的JavaScript行为

<script>
//默认导出。这是固定写法!
export default {
//注意:.vue组件中的data不能像之前一样，不能指向对象。
//组件中的 data 必须是一个函数
data() {
    return {
         username: 'admin'
    }
}
}
</script>

style ->组件的样式

<style lang = "scss">
//用来编写样式
</style>

三.使用父子组件

在父组件注册子组件,即私有组件:

1. 使用import语法导入需要的组件
2. 在父组件中使用components节点注册子组件
3. 以标签的形式使用刚才注册的组件

如果子组件要在多个父组件中使用,需要注册全局组件:

1. 在main.js文件中,通过vue.component()注册
2. 先import导入
3. 再注册vue.component(“myCount”,count)

四.组件的props

• props是组件的自定义属性,在封装通用的全局组件时,合理的使用props可以提高组件复用性
• props的值是只读的,想修改props的值，可以把 props的值转存到data中
• props的写法有两种形式,数组和对象格式

export default {
//组件的自定义属性
props:['自定义属性A'，‘自定义属性B'，'其它自定义属性..."].
//组件的私有数据
data() {
    return { }
    }
}

export default {
props: {
    init: {
        //用default属性定义属性的默认值
        default: 0
        //用type属性定义属性的值类型,不符合时,终端报错
        type:number
        //必填项校验
        required:true       
        }
    }
}

五.阻止组件之间的样式冲突

默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是:
单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的每个
组件中的样式，都会影响整个index.html页面中的DOM元素

解决方法: 加一个scoped

<style lang="scss" scoped>
</style>

解决样式穿透问题用/deep/
使用情况:

在父组件中直接修改子组件的样式时,需要用/deep/
在使用第三方组件库的时候,如果有修改第三方组件默认样式的需求,要用/deep/