「前端开发」- Vue-Component - elio 的博客

组件

Vue组件化就是对UI结构的复用，Vue是一个支持组件的框架。

在Vue中，组件的后缀是.vue，任何.vue文件都是一个组件。App.vue是根组件。

组件的构成

Vue组件主要有三个部分组成：template, script, style。

template：组件的模板结构
- template只是一个容器标签，不会被渲染为真的Dom结构
- template中只能包含唯一的根节点标签，不能同时出现两个根节点
script：组件的JavaScript行为
- 固定用法：script第一句必须是export default {}
- .vue文件中的数据必须定义成方法，而不是数据对象
- 计算属性computed，侦听器watch，过滤器filters，方法methods均使用对象定义
style：组件的样式，支持less语法，只需要将style标签的lang="less"即可

<template>
    <div id="app"></div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                username: "",
                age: 21
            }
        },
        methods: {

        }
    }
</script>

<style lang="less">
#app {
    font-family: Avenir, Arial, sans-serif;
    color: red;
    margin-top: 60px;
}
</style>

组件的关系

组件之间常见的关系有：父子、兄弟。

组件在创建的时候不具有关系，使用的时候才具有了关系，组件间的关系主要是根据嵌套关系确定的。

组件的使用步骤

如果要在一个组件中使用另一个组件，则需要遵循下面的步骤：

首先，在script中导入组件：

import Left from "@/components/Left.vue"
import Right from "@/components/Right.vue"

然后，在export default使用components节点注册组件：

export default {
    components: {
        Left,
        Right
    }
}

注册完毕后，可以直接在template中使用组件标签（组件看成自定义标签）

<template>
    <div id="app">
        <Left></Left>
        <Right></Right>
    </div>
</template>

全局组件

使用components节点注册的组件是私有组件，只能在父组件内部使用。如果想为全局注册组件，在任何组件中都可以调用，则需要在main.js中使用下列语句：

import Count from '@/components/Count.vue'

Vue.component('MyCount', Count);

其中：MyCount是全局组件的名称，该组件存在Count.vue文件下。

自定义属性props

props是自定义属性节点，声明在export default中，允许使用者通过自定义属性，为当前组件指定初始值。

组件的封装者，使用props属性定义自定义属性；组件的使用者，在使用组件的时候，为自定义属性指定任意值。

export default {
    // 组件的自定义属性
    props: ['attribute1', 'attribute2', 'attribute3'...]

    // 组件的私有数据
    data() {
        return {}
    }
}

props是只读的，程序员不能修改props的值。如果确实要修改props的值，将props的值转存到data中：

export default {
    // 组件的自定义属性
    props: ['init']

    // 组件的私有数据
    data() {
        return {
            count: this.init
        }
    }
}

如此，便可以通过修改count来达到修改init的目的。

default

default用于定于属性的默认值。

export default {
    
    props: {
        init: {
            default: 0
        }
    }
}

type

type用于定义属性值的类型。如果传递的值不符合该类型，则会报错。

export default {
    
    props: {
        init: {
            default: 0,
            type: Number
        }
    }
}

required

required是用来定义属性是否必须填写，将属性设为必填项后，强制用户传递属性的值。

export default {
    
    props: {
        init: {
            default: 0,
            type: Number,
            required: true
        }
    }
}

组件间的样式冲突

在组件内部通过style指定样式实际上是全局的样式（因为最终他们都要在index.html）中渲染，必然会发生冲突。

解决冲突的方法是：在每一个组件中都指定一个自定义属性data-v-xxx，然后使用CSS的属性选择器指定样式。人为手动指定属性选择器比较麻烦，Vue提供了简单的方式，即在style标签中使用scoped，就会自动重复上面的过程，保证当前的css样式封闭在当前的组件里。

使用scoped后，当前样式便无法对子组件的样式进行修改，当使用第三方组件库的时候，如果有修改第三方默认样式的需求，需要使用/deep/深度选择器：

<style>
.title {
    color: blue; // 不加deep，生成的选择器为.title[data-v-052242de]
}

/deep/ .title {
    color: blue; // 加deep时，生成的选择器是[data-v-052242de] .title
}
</style>

「前端开发」 -

Vue-Component

Vue —— 组件

组件