Vue组件基础知识点

害恶细君

发布于 2022-11-22 08:27:30

3540

发布于 2022-11-22 08:27:30

文章被收录于专栏：编程技术总结分享

Vue组件知识点总结

组件化开发指的是根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。

一.vue中的组件化开发

vue是一个支持组件化开发的前端框架。 vue中规定：组件的后缀名为.vue 。之前接触到的App.vue文件本质上就是一个vue的组件。

二.组件的三个组成部分

每个.vue组件都由3个部分构成，分别是：

template ：组件的模板结构
script ：组件的JavaScript行为
style ：组件的样式

注意：在template里面只能有一个根元素，不然会报错。如果组件里面要定义多个元素，要放在一个根div中 比如：

案例：

<template>
    <div>
        <h3>这是{{username}}自定义的Test.vue</h3>
    </div>
</template>

<script>
   // export default是默认的写法
    export default {
        //组件里面的data必须是一个函数，不能直接写成data:{}
        data() {
            //在return里面写的是一个数据对象，返回定义的数据
            return {
                username: '害恶细菌'
            }
        }
    }
</script>

<style>
    div {
        background-color: #f00;
    }
</style>

定义methods方法

<script>
   // export default是默认的写法
    export default {
        //组件里面的data必须是一个函数，不能直接写成data:{}
        data() {
            //在return里面写的是一个数据对象，返回定义的数据
            return {
                username: '害恶细菌'
            }
        },
        methods:{
            changeName(){
                //在组件中，this指向的是组件的实例。
                this.username = 'haiexijun'
            }
        }
    }
</script>

定义侦听器watch、当前组件中的计算属性computed、过滤器filter

<script>
   // export default是默认的写法
    export default {
        //组件里面的data必须是一个函数，不能直接写成data:{}
        data() {
            //在return里面写的是一个数据对象，返回定义的数据
            return {
                username: '害恶细菌'
            }
        },
        methods:{
            changeName(){
                //在组件中，this指向的是组件的实例。
                this.username = 'haiexijun'
            }
        },
        //当前组件的侦听器，当data的值发生改变时触发
        watch:{
            username(newVal,oldVal){
                console.log(newVal,oldVal)
            }
        },
        //当前组件中的计算属性，只要改变了组件中的数据
        computed:{

        },
        //当前组件中的filters
        filters:{

        }
    }
</script>

发现，只有data要为一个函数形式，其他则定义为对象形式。

如果style要用less，添加一个lang=“less”

<style lang="less">
</style>

三.组件的使用步骤

组件封装好之后，彼此之间是相互独立存在的，不存在父子关系。

在使用组件的时候，根据彼此的嵌套关系，形成父子关系，兄弟关系。

以一个案例来推动学习：在项目的src目录下面的components目录下，创建两个vue组件，分别是right.vue和left.vue。

下面来介绍使用步骤

步骤1

上面提到了，如果要使用组件，就必须要在一个父组件里面使用它。也就是说，我们components目录里自己定义的所有组件，要在外面的App.vue这个父组件里被使用。但要想在App.vue这个组件里面使用其他组件，第一步就是在App.vue这个组件里的<script>里面使用import导入要使用的组件。 然后使用components节点注册组件.

<script>
import left from './components/left.vue'

export default {
  name: 'App',
  //在components里面注册组件
  components: {
    left
  }
}
</script>

步骤2

在template里的根标签内使用刚才注册的组件。要以标签的形式使用刚才注册的组件

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

四.注册全局组件

通过components注册的组件是私有组件。 例如：在组件A的components节点下，注册了组件F。则组件F只能用在组件A中，不能用在其他的组件中。即如果组件C中如果没有用components注册组件F，那么就无法使用。如果一个组件频繁被用到，那使用起来非常地不方便。可以通过注册全局组件来方便使用。

在vue项目的main.js入口文件中，通过Vue.component()方法，可以注册全局组件。 示例代码如下：

//导入需要全局注册的组件
import Count from './components/Count.vue'
//Vue.component()的第1个参数为字符串，表示组件的注册名字.第2个参数为需要注册的组件对象
Vue.component('myCount',Count);

五. 组件的props

当封装好的一个子组件被其他多个不同父组件使用时，会发现子组件内定义的data数据在所有的使用它的父组件内的数值都是一样的，假如我第一个父组件内引用的子组件的初始数据为1，另一个引用该子组件的父组件也会显示一。例如，封装了一个子组件，里面显示data里面的num：1在页面上。我想把这个组件用在第一个父组件时显示1，让他用在第二个父组件时显示2，如果不用props，则无法实现，他们都会显示1。

下面是一个案例：有一个子组件Count.vue，实现点击按钮后会对原始数据自动增加1的功能。但是使用它两个父组件对里面原有地初始值都不同。

<template>
    <div>
        <h5>count组件</h5>
        <p>count的值为{{init}}</p>
        <button @click="count += 1">+1</button>
    </div>
</template>

<script>
export default {
    //props是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值
    //自定义属性的名字可以自定义，比如下面的init（只要名字合法就行）
    //谁用这个组件，就可以在组件内自定义这个init的值（父组件通过给子组件对props内定义的属性赋值即可）。eg：<mycount init="5"></mycount>
	//props是只读的。不要直接修改props里面的值，否则终端会报错。
    
    props:['init'],

    data(){
        return{
            count:0
        }
    }
}
</script>

<style lang="less">

</style>

props与data节点同级。

下面是两个父组件对它的调用： left组件：

<template>
    <div>
        我是left组件
        <hr/>
        <myCount :init='3'></myCount>
    </div>
</template>

<script>
export default {
    name: 'left'
}
</script>

<style>
div{
    float: left;
    width: 100px;
    height: 100px;
}
</style>

<myCount init=‘3’>对组件的init值定义了一个值为3

right组件：

<template>
    <div>
        我是right组件
        <hr/>
        <myCount :init='8'></myCount>

    </div>
</template>

<script>
export default {
    name: 'Right'
}
</script>

<style>
div{
    float: left;
    width: 100px;
    height: 100px;
}
</style>

<myCount init=‘8’>对组件的init值定义了一个值为8

效果：

上面有一个点要注意，就是我们使用<MyCount>组件给其设置一个init的props属性时，如果直接init=“8” ,这时设置的是一个字符串类型的init属性。如果要设置为数值的属性，就要为init添加v-bind属性绑定，即：<MyCount :init=“8”>或<MyCount v-bind:init=“8”> ，这时里面的init属性才是数值型。这时因为v-bind里面的值为js的字面量。1就是数值1，而不是字符串。

那么问题又来了，如何实现点击+1按钮后如何数值加一呢？可以通过this.init为count赋值,然后页面上渲染count就行了。下面是更改后的Count.vue子组件：

<template>
    <div>
        <h5>count组件</h5>
        <p>count的值为{{count}}</p>
        <button @click="count+=1">+1</button>
    </div>
</template>

<script>
export default {
    //props是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值
    //自定义属性的名字可以自定义，比如下面的init（只要名字合法就行）
    //谁用这个组件，就可以在组件内自定义这个init的值（父组件通过给子组件对props内定义的属性赋值即可）。eg：<mycount init="5"></mycount>
    
    props:['init'],

    data(){
        return{
            count:this.init
        }
    },

}
</script>

<style lang="less">

</style>

六.props的default默认值，

上面的的left和right在使用Count子组件的时候，都给它的init属性初始化绑定了一个默认的值，如：<myCount :init=‘8’>。但是如果有些用户如果就是不给Count组件的init属性初始化一个值呢（<myCount></myCount>）？如果不传值，有些时候就希望它能有一个默认的初始值了。

在声明自定义属性props时，可以通过default来定义属性的默认值。并且props不能用数组形式来定义，而是用对象的形式来定义。 示例代码如下：

export default {

    props:{
        自定义属性名:{
            default:默认值
        }
    }
}

如我们给Count组件中的init设定默认值为100：

<template>
    <div>
        <h5>count组件</h5>
        <p>count的值为{{count}}</p>
        <button @click="count+=1">+1</button>
    </div>
</template>

<script>
export default {

    props:{
        init:{

            default:100
        }
    },
    

    data(){
        return{
            count:this.init
        }
    },

}
</script>

<style lang="less">

</style>

七.prop的type值类型

在声明自定义属性时，可以通过type来定义属性的的值类型，如果用户传递过来的值不符合此类型，则会在控制台报错。 示例代码如下：

export default {

    props:{
        init:{
            type:Number,
            default:3
        }
    }
}

八.props的require必填项

props属性里面的require是来规定某个属性是一个必填项,那怕组件的这个props属性有默认值，不自己手动传入，也会报错。

<script>
export default {

    props:{
        init:{
            type:Number,
            default:3,
            require:true
        }
    },
    

    data(){
        return{
            count:this.init
        }
    },

}
</script>

九.组件组件的样式冲突问题

默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

导致组件之间样式冲突的根本原因是： 1.单页面应用程序俄中，所有组件的DOM结构，都是基于唯一的index.hml 页面来进行呈现的 2.每个组件中的样式，都会影响整个index.html页面中的DOM元素。

1.scoped的使用和底层实现原理

先来演示一下它的底层实现原理：我们每个组件里面都标记上不同的data-v的自定义属性，然后通过[]属性选择器进行编写不用组件的样式 left.vue

<template>
    <div data-va-001>
        <h1 data-v-001>我是left组件</h1>
        <hr/>
        <myCount :init='0' data-v-001></myCount>
    </div>
</template>

<script>
export default {
    name: 'left'
}
</script>

<style>

h1[data-v-001]{
    color: red;
}
div[data-v-001]{
    float: left;
    width: 100px;
    height: 100px;
}
</style>

right.vue

<template>
    <div data-v-002>
        <h1 data-v-002>我是right组件</h1>
        <hr/>
        <myCount data-v-002></myCount>

    </div>
</template>

<script>
export default {
    name: 'Right'
}
</script>

<style>
div[data-v-002]{
    float: left;
    width: 100px;
    height: 100px;
}
</style>

打开网页发现，只有left组件的h1变红了。

但是Vue帮助我们简化了，不用这么去写。只要给组件的style标签加上scoped就可以了。

<style scoped>

h1{
    color: red;
}
div{
    float: left;
    width: 100px;
    height: 100px;
}
</style>

2.使用/deep/修改修改子组件中的样式

如果要在left组件里面把Count子组件的标题改为粉红色，把right组件里面的Count子组件保持原来的颜色。并且我们不要修改Count子组件里面的样式，该这么办呢？

<template>
    <div>
        <h1>我是left组件</h1>
        <hr/>
        <myCount :init='0'></myCount>
    </div>
</template>

<script>
export default {
    name: 'left'
}
</script>

<style scoped>

h5{
    color: pink;
}

h1{
    color: red;
}
div{
    float: left;
    width: 100px;
    height: 100px;
}
</style>

如果我们直接给left组件配置h5的样式的话，其实并不会生效，因为这个组件设置了scoped。

这时候就要用到/deep/了进行如下的配置：

<style scoped>

/deep/ h5{
    color: pink;
}

h1{
    color: red;
}
div{
    float: left;
    width: 100px;
    height: 100px;
}
</style>

这时候就变成粉红色了

当使用第三方组件库的时候，如果有修改组件默认样式的需求，需要用到/deep/

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-11-25，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度