Vue组件是什么及怎么应用

本篇内容主要讲解“Vue组件是什么及怎么应用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue组件是什么及怎么应用”吧!

成都创新互联是由多位在大型网络公司、广告设计公司的优秀设计人员和策划人员组成的一个具有丰富经验的团队，其中包括网站策划、网页美工、网站程序员、网页设计师、平面广告设计师、网络营销人员及形象策划。承接：成都网站建设、网站制作、网站改版、网页设计制作、网站建设与维护、网络推广、数据库开发,以高性价比制作企业网站、行业门户平台等全方位的服务。

什么是组件

用面向对象的思维去理解Vue组件，可以将所有的事物都抽象为对象，而类或者说是组件，都具有属性和操作。

如抽取人类为组件，其基本的属性有姓名、年龄、国籍；基本的方法有吃饭、睡觉、跑步等。

<script>
export default {
    name: "person",
    props: {
        name: {
            type: String,
            required: false,
            default: "无名氏"
        },
        age: {
            type: Number,
            required: false,
            default: 0
        },
        country: {
            type: String,
            required: false,
            default: "地球人"
        }
    },
    methods: {
        eat() {
            consloe.log("吃饭")
        },
        sleep() {
            consloe.log("睡觉")
        },
        run() {
            consloe.log("跑步")
        }
    }
}
</script>

在面向对象中，构造函数可以为类初始化全局变量，所以这种方式同样可以用在组件中

<person :age="20" :name=""小明"" :country=""中国人""></person>

组件封装了数据以及操作，有进则有出，我们不用关心组件内发生了什么，我们只需要结果和呈现出来的效果如何。

自定义事件

外界不可以直接访问使用或访问组件的属性，该如何做？

使用$emit自定义事件，可以实现外界获取组件属性。

<template>
    ...
    <button @click="handleClick">点击</button>
</template>

<script>
export default {
    name: "person",
    methods: {
        handleClick() {
            this.$emit("getPerson", {
                age: this.age,
                name: this.name,
                country: this.country
            })
        }
    }
}
</script>

外界调用组件时添加自定义函数@getPerson或v-on:click="getPerson"

<template>
    <div>
        <person :age="20" :name=""小明"" :country=""中国人"" @getPerson="getPerson"></person>
    </div>
</template>

<script>
export default {
    name: "test",
    methods: {
        getPerson(info) {
            consloe.log(info)
        }
    }
}
</script>

实际案例

在网页开发中，你可能会用到标签，而你可能会想到标签不可能在一个页面使用一次，可能是多次使用到。你还可能会想到因为不同的情况而自定义一些宽度、高度和颜色。

所以可以将标签相关的HTML代码和CSS封装到组件中，对外，我们暴露width、height和type参数。在使用时，因为不同的情况而需要自定义，那么传递参数即可。

<template>
    <view
        :style="{ width: width, height: height }"
        :class="["owl-tag-" + type]"
        class="owl-tag text-xs flex align-center justify-center"
    >
        <slot></slot>
    </view>
</template>

<script>
    name: "owl-tag",
    props: {
        // 可传入有效值为 primary | gray
        type: {
            type: String,
            default: "primary"
        },
        width: {
            type: String,
            required: false
        },
        height: {
            type: String,
            required: false
        }
    }
</script>

<style>
.owl-tag {
    border-radius: 8rpx;
    padding: 6rpx 10rpx;
}

.owl-tag-primary {
    color: white;
    background-color: #87cefa;
}

.owl-tag-gray {
    color: #81868a;
    background-color: #f0f1f5;
}
</style>

这些工作做好了，一个组件就被我们定义好了。想用就调用，想改就传参，这就是组件的好处。

<template>
    <owl-tag
        :type=""primary""
        :height=""45rpx""
        :width=""120rpx""
    >
        官方帖
    </owl-tag>
</template>

到此，相信大家对“Vue组件是什么及怎么应用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

文章标题：Vue组件是什么及怎么应用
分享URL：https://www.cdcxhl.com/article44/geoihe.html

成都网站建设公司_创新互联，为您提供面包屑导航、网站营销、移动网站建设、网站内链、用户体验、营销型网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容