vue 组件

Posted 2021-02-11 jiangtengteng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 组件相关的知识，希望对你有一定的参考价值。

　　什么是组件：组件是可复用的vue实例，它的特点是独立、可复用且整体化。

　　为什么要组件化：为了实现功能模块的复用，高执行率，便于开发单页面复杂应用。

　　组件化带来的问题：组件状态管理（vuex）；

　　　　　　　　　　　多组件的混合使用，多页面，复杂逻辑（vue-router）；

　　　　　　　　　　　组件间的传参、消息、事件处理（props，emit/on，bus）。

　　下面，我们来看看怎么创建组件以及使用组件，先注册组件：Vue.component(‘componentName‘,{data:...,template:...})，componentName是你的组件名称，data是组件的数据，切记data必须是一个函数，如果data只是一个对象，那我们在复用组件到的时候，组件和组件之间的数据是会受到彼此的影响的，template则是我们要建立的DOM模板内容。然后我们需要在哪里使用到这个组件，就把组件名当标签使用在html里就可以来，我们来看一个小栗子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>

<body>
    <div class="myApp">
        <button-groups></button-groups>
        <button-groups></button-groups>
        <button-groups></button-groups>
    </div>
    <script>
    Vue.component(‘button-groups‘, {
        data: function() {
            return {
                count: 0
            }
        },
        template: "<div><button @click=‘count++‘>点击了{{count}}次</button></div>"
    });
    new Vue({
        el: ‘.myApp‘
    });
    </script>
</body>

</html>

　　前文提到的vuex，后面的文章会单独将，它一种响应式的状态管理，很重要，需要单独来说。现在，我们看一下组件之间的通信，vue通过prop向子组件传递数据。看下下面的例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue组件 props</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <style>
    .myApp p {
        display: inline-block;
        width: 150px;
    }
    </style>
</head>

<body>
    <div class="myApp">
        <msg-info v-bind:msg=‘msg‘></msg-info>
    </div>
    <script>
    Vue.component(‘msg-info‘, {
        props: [‘msg‘],
        template: "<div><p>{{msg}}</p></div>"
    });
    new Vue({
        el: ‘.myApp‘,
        data: {
            msg: ‘hello world!‘
        }
    });
    </script>
</body>

</html>

　　上面的例子中，使用props给子组件传递了一条动态的数据。那么，如果有多条数据怎么办呢？比如一篇文章，有作者有标题，有发布时间有正文的，而且我们会请求很多条文章的时候怎么渲染展示呢，看看下面的例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <style>
    .blog-groups{
        background: #ffffcc;
        padding: 20px 50px;
        margin-bottom: 10px;
    }
    h1{
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }
    .time{
        text-align: right;
    }
    .time p {
        font-size: 14px;
        display: inline-block;
        margin-right: 10px;
    }
    .content p{
        text-indent: 30px;
    }
    </style>
</head>

<body>
    <div class="myApp">
        <blog-groups v-for="items in blogs" v-bind:items=‘items‘></blog-groups>
    </div>
    <script>
    Vue.component(‘blog-groups‘, {
        props: [‘items‘],
        template: "<div class=‘blog-groups‘><h1>{{items.title}}</h1><div class=‘time‘><p>作者：{{items.autor}}</p><p>发布时间：{{items.times}}</p></div><div class=‘content‘><p>{{items.content}}</p></div></div>"
    });
    new Vue({
        el: ‘.myApp‘,
        data: {
            blogs: [{
                title: ‘射手座的我‘,
                autor: ‘jhon‘,
                times: ‘2019-02-15‘,
                content: ‘天生乐观、对人生充满理想、正直坦率、丰富的幽默感、酷爱和平、待人友善、行动力强、有自己的处世哲学、经得起打击、救世救人的热情、乐观、活泼、坦率、自尊心强、多才多艺、有很高的智慧，颇富直觉、拥有鼓舞他人的力量，思想开明、适应力强，有很好的判断力，有处理紧急事务的才能，擅长哲学思考，富崇高的正义感，非常敏感而聪慧，喜爱自由、诚恳、正直、可靠、慎重。‘
            }, {
                title: ‘狮子座的你‘,
                autor: ‘lily‘,
                times: ‘2019-02-18‘,
                content: ‘人生如“秀”生活的每个角落都是舞台人生如秀，既然要秀，就要秀得漂亮，秀得痛快，秀得令人难忘。狮座人把生活的每角落都当成自己表演的舞台，他看起来好像非常爱“现”，殊不知他只是活得太认真太讲究罢了。凡有人在之处，他便无法完全松弛，藉助于表演性质的沟通方式，使他可以知悉在场的人是否相处得来，这头狮子才会慢慢从警醒状态解放出来。接下来如果他还继续在“现”，那便是他把你当自己人看，他喜欢娱乐朋友。当然啦，最重要的是，他真的很能“现”，可以从中获得人生至乐。在他秀过之后，记得给他掌声或献上玫瑰花，他会表现得很不在乎这些，他心中真正暗喜的是：“很好，没有人在我表演结束之前离席！”‘
            }, {
                title: ‘水瓶座的他‘,
                autor: ‘zaya‘,
                times: ‘2019-02-19‘,
                content: ‘水瓶座人无法让别人一厢情愿地爱着他，他更不可能一厢情愿地缠着别人。当他吸引你时，你最好不要太快表现出你对他的好感或好奇，更千万保留你对他的赞美之词，因为万一你并不吸引他，他会觉得你对他的评价不值采信。‘
            }]
        }
    });
    </script>
</body>

</html>

View Code

　　如果我们需要给子组件添加事件，达到父子组件进行沟通的效果，应该怎么来实现呢，这就需要用到$emit 方法，这个方法第一个传入一个事件名称，这个事件名称，我们能在父组件获取并控制，后面还何以传入其他参数，具体使用方法，可以看下官方文档哈，我这里没用就不说了。下面说个例子，我们在看小说的时候，有时候会用到放大字体或者缩小字体的功能，这里我们就通过给子组件添加两个按钮来实现一下这个功能：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <style>
    .blog-groups{
        background: #ffffcc;
        padding: 20px 50px;
        margin-bottom: 10px;
    }
    h1{
        text-align: center;
        font-weight: bold;
    }
    .time{
        text-align: right;
    }
    .time p {
        display: inline-block;
        margin-right: 10px;
    }
    .time span{
        display: inline-block;
        background: pink;
        border-radius: 5px;
        padding: 2px 5px;
        margin: 0 5px;
        cursor: pointer;
    }
    .content p{
        text-indent: 30px;
    }
    </style>
</head>

<body>
    <div class="myApp" :style="{ fontSize: postFontSize + ‘px‘ }">
        <blog-groups v-for="items in blogs" v-bind:items=‘items‘ v-on:enlarge-text="postFontSize += 1" v-on:reduce-text="postFontSize -= 1"></blog-groups>
    </div>
    <script>
    Vue.component(‘blog-groups‘, {
        methods:{
            bigFontSize(){
                this.$emit(‘enlarge-text‘);
            },
            reduceFontSize(){
                this.$emit(‘reduce-text‘);
            },
        },
        props: [‘items‘],
        template: "<div class=‘blog-groups‘><h1>{{items.title}}</h1><div class=‘time‘><p>作者：{{items.autor}}</p><p>发布时间：{{items.times}}<span v-on:click=‘bigFontSize‘>放大字体</span><span v-on:click=‘reduceFontSize‘>缩小字体</span></p></div><div class=‘content‘><p>{{items.content}}</p></div></div>"
    });
    new Vue({
        el: ‘.myApp‘,
        data: {
            blogs: [{
                title: ‘射手座的我‘,
                autor: ‘jhon‘,
                times: ‘2019-02-15‘,
                content: ‘天生乐观、对人生充满理想、正直坦率、丰富的幽默感、酷爱和平、待人友善、行动力强、有自己的处世哲学、经得起打击、救世救人的热情、乐观、活泼、坦率、自尊心强、多才多艺、有很高的智慧，颇富直觉、拥有鼓舞他人的力量，思想开明、适应力强，有很好的判断力，有处理紧急事务的才能，擅长哲学思考，富崇高的正义感，非常敏感而聪慧，喜爱自由、诚恳、正直、可靠、慎重。‘
            }, {
                title: ‘狮子座的你‘,
                autor: ‘lily‘,
                times: ‘2019-02-18‘,
                content: ‘人生如“秀”生活的每个角落都是舞台人生如秀，既然要秀，就要秀得漂亮，秀得痛快，秀得令人难忘。狮座人把生活的每角落都当成自己表演的舞台，他看起来好像非常爱“现”，殊不知他只是活得太认真太讲究罢了。凡有人在之处，他便无法完全松弛，藉助于表演性质的沟通方式，使他可以知悉在场的人是否相处得来，这头狮子才会慢慢从警醒状态解放出来。接下来如果他还继续在“现”，那便是他把你当自己人看，他喜欢娱乐朋友。当然啦，最重要的是，他真的很能“现”，可以从中获得人生至乐。在他秀过之后，记得给他掌声或献上玫瑰花，他会表现得很不在乎这些，他心中真正暗喜的是：“很好，没有人在我表演结束之前离席！”‘
            }, {
                title: ‘水瓶座的他‘,
                autor: ‘zaya‘,
                times: ‘2019-02-19‘,
                content: ‘水瓶座人无法让别人一厢情愿地爱着他，他更不可能一厢情愿地缠着别人。当他吸引你时，你最好不要太快表现出你对他的好感或好奇，更千万保留你对他的赞美之词，因为万一你并不吸引他，他会觉得你对他的评价不值采信。‘
            }],
            postFontSize: 14
        }
    });
    </script>
</body>

</html>

View Code

　　除了上面我们说到的知识点，组件还有其他的知识点，我这里就先不说了，以后用到再补充吧，上面是组件基本的使用方法。

以上是关于vue 组件的主要内容，如果未能解决你的问题，请参考以下文章

vue3中的fragment（片段）组件

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

Vue组件之全局组件与局部组件

vue-个人学习----组件

vue视频学习笔记05