「前端开发」 -

Vue-Component

Vue —— 组件

Posted by eliochiu on November 14, 2022

组件

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中导入组件:

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

然后,在export default使用components节点注册组件:

1
2
3
4
5
6
export default {
    components: {
        Left,
        Right
    }
}

注册完毕后,可以直接在template中使用组件标签(组件看成自定义标签)

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

全局组件

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

1
2
3
import Count from '@/components/Count.vue'

Vue.component('MyCount', Count);

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

自定义属性props

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

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

1
2
3
4
5
6
7
8
9
export default {
    // 组件的自定义属性
    props: ['attribute1', 'attribute2', 'attribute3'...]

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

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

1
2
3
4
5
6
7
8
9
10
11
export default {
    // 组件的自定义属性
    props: ['init']

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

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

default

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

1
2
3
4
5
6
7
8
export default {
    
    props: {
        init: {
            default: 0
        }
    }
}

type

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

1
2
3
4
5
6
7
8
9
export default {
    
    props: {
        init: {
            default: 0,
            type: Number
        }
    }
}

required

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

1
2
3
4
5
6
7
8
9
10
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>