Vue组件是什么？Vue组件如何使用？（代码示例）

青灯夜游

发布时间：2018-10-24 17:38:37

2500人浏览过

来源于博客园

转载

本篇文章给大家带来的内容是介绍vue组件是什么？vue组件如何使用？（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

组件的介绍

组件系统是将一个大型的界面切分成一个一个更小的可控单元。
组件是可复用的，可维护的。
组件具有强大的封装性，易于使用。

立即学习“前端免费学习笔记（深入）”；
大型应用中，组件与组件之间交互是可以解耦操作的。

Vue组件的使用

全局组件的使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header></my-header>
    </div>


    <script>
        //全局组建的定义
        Vue.component("my-header", {
            template: '<h1>全局组件</h1>'
        });
        var app = new Vue({
            el: '#app',
        });
    </script>

</body>

</html>

局部组件的使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header></my-header>
    </div>


    <script>
        //局部组件定义
        var app = new Vue({
            el: '#app',
            components: {
                'my-header': {
                    template: '<h1>局部组件</h1>'
                }
            }
        });
    </script>

</body>

</html>

组件数据的特点

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header></my-header>
        <my-header></my-header>
        <br>
        <my-header1></my-header1>
        <my-header1></my-header1>
    </div>

    <script>
        //组件数据之间不共享，Vue实例中的数据也不能共享给组件,并且组件中的data只能使用函数
        //组件的数据data使用函数的特点是每次点击或操作组件函数会重新执行，这样就不会影响其它组件，通过下面两个例子可以看出
        var data = {
            count: 0
        };
        var app = new Vue({
            el: '#app',
            data: {
                message: "Hello Vue!!!"
            },
            components: {
                'my-header': {
                    template: '<h1 v-on:click="changeCount">{{count}}</h1>',
                    data: function() {
                        return data;
                    },
                    methods: {
                        changeCount: function() {
                            this.count++;
                        }
                    }
                },
                'my-header1': {
                    template: '<div v-on:click="changeCount1">{{count}}</div>',
                    data: function() {
                        return {
                            count: 0
                        };
                    },
                    methods: {
                        changeCount1: function() {
                            this.count++;
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>

Vue实例与组件之间的关系

Vue组件其实是一个可扩展的Vue实例。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
    </div>

    <script>
        //Vue组件其实是一个可扩展的Vue实例，Vue实例也可以看成是一个组件
        // var app = new Vue({
        //     el: '#app',
        //     template: '<h1>app应用</h1>'
        // });
        //使用继承实现Vue组件
        var myComponent = Vue.extend({
            data: function() {
                return {
                    message: "Hello Vue@@@"
                }
            }
        });
        var vm = new myComponent({
            el: '#app'
        });
    </script>

</body>

</html>

Vue组件的模版方式

\
`
<template id="xxx"></template>
<script type="text/x-template"></script>
.vue 单文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header></my-header>
        <my-header-1></my-header-1>
        <my-header-2></my-header-2>
        <my-header-3></my-header-3>
    </div>


    <template id="temp">
            <div>
                <p>
                    <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                        </ul>
                    </p>
                </div>
    </template>
    <script type="text/x-template" id="temp1">
        <div>
            <p>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </p>
        </div>
    </script>
    <script>
        //Vue模版添加方式
        var app = new Vue({
            el: '#app',
            components: {
                'my-header': {
                    template: '<div>\
                                    <p>\
                                        <ul>\
                                            <li>1</li>\
                                            <li>2</li>\
                                            <li>3</li>\
                                        </ul>\
                                    </p>\
                                </div>',
                    data: function() {
                        return {
                            message: "第一项"
                        }
                    }
                },
                'my-header-1': {
                    template: `<div>
                                    <p>
                                        <ul>
                                            <li>1</li>
                                            <li>2</li>
                                            <li>3</li>
                                        </ul>
                                    </p>
                                </div>`,
                },
                'my-header-2': {
                    template: '#temp'
                },
                'my-header-3': {
                    template: '#temp1'
                }

            }
        });
    </script>

</body>

</html>

Vue父组件向子组件通信（props）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 数据在组件中 -->
        <my-header></my-header>
        <!-- 父组件向子组件传递数据 -->
        <my-header-1 :list="temp_2_list"></my-header-1>
        <!-- 父组件向子组件传递数据不给值 -->
        <my-header-1></my-header-1>

    </div>
    <!-- 数据在组件中的模版 -->
    <template id="temp-1"> 
            <div>
                    <h1>{{message}}</h1>
                    <ul>
                        <li v-for="item in list">{{item}}</li>
                    </ul>
                </div>
    </template>
    <!-- 父组件向子组件传递数据的模版 -->
    <template id="temp-2">
            <div>
                    <h1>{{message}}</h1>
                    <ul>
                        <li v-for="item in list">{{item}}</li>
                    </ul>
                    <my-nav :itemlist = "list"></my-nav>
                </div>
    </template>
    <!-- 子组件向子组件传递数据的模版 -->
    <template id="temp-3">
            <div>
                    <h1>{{message}}</h1>
                    <ul>
                        <li v-for="item in itemlist">{{item}}</li>
                    </ul>
                </div>
    </template>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                temp_2_list: ["1", "2", "3"]
            },
            components: {
                //数据在自己组件中的实例
                'my-header': {
                    template: '#temp-1',
                    data: function() {
                        return {
                            list: ["1", "2", "3"],
                            message: "组件中的数据"
                        };
                    }
                },
                //父组件向子组件传递数据
                'my-header-1': {
                    //props: ["list"],
                    template: '#temp-2',
                    data: function() {
                        return {
                            message: "父组件向子组件传递数据"
                        };
                    },
                    //属性的验证与默认值
                    props: {
                        list: {
                            type: Array,
                            default: ["4", "5", "6"]
                        }
                    },
                    //子组件的子组件
                    components: {
                        'my-nav': {
                            template: '#temp-3',
                            data: function() {
                                return {
                                    message: "子组件中的子组件"
                                };
                            },
                            props: ["itemlist"]
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>

子组件向父组件通信（EmitEvents）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header-1 :list="temp_2_list"></my-header-1>

    </div>
    <!-- 父组件向子组件传递数据的模版 -->
    <template id="temp-2">
        <div>
                <h1>{{message}}</h1>
                <ul>
                    <li v-for="item in list">{{item}}</li>
                </ul>
                <my-nav :itemlist = "list" v-on:change-events="getChildContent"></my-nav>
            </div>
</template>
    <!-- 子组件向子组件传递数据的模版 -->
    <template id="temp-3">
        <div>
                <h1>{{message}}</h1>
                <ul>
                    <li v-for="item in itemlist" v-on:click="getContent">{{item}}</li>
                </ul>
            </div>
</template>

    <script>
        //子组件向父组件传递数据，是发布订阅模式
        var vm = new Vue({
            el: '#app',
            data: {
                temp_2_list: ["1", "2", "3"]
            },
            components: {
                //父组件向子组件传递数据
                'my-header-1': {
                    //props: ["list"],
                    template: '#temp-2',
                    data: function() {
                        return {
                            message: "父组件向子组件传递数据"
                        };
                    },
                    //属性的验证与默认值
                    props: {
                        list: {
                            type: Array,
                            default: ["4", "5", "6"]
                        }
                    },
                    methods: {
                        getChildContent: function(str) {
                            debugger
                            alert(str);
                        }
                    },
                    //子组件的子组件
                    components: {
                        'my-nav': {
                            template: '#temp-3',
                            data: function() {
                                return {
                                    message: "子组件中的子组件"
                                };
                            },
                            props: ["itemlist"],
                            methods: {
                                getContent: function(ev) {
                                    // console.log(this);
                                    // console.log(ev.target.innerHTML);
                                    this.$emit("change-events", ev.target.innerHTML);
                                }
                            }
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>

Vue非父子组件的通信

歌者PPT
歌者PPT，AI 写 PPT 永久免费

下载

空实例与自定义事件

$emit
$on

Vuex状态管理

state
mutation
commit

空实例与自定义事件的使用(适用于小型项目)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <my-header-1></my-header-1>
        <my-header-2></my-header-2>

    </div>

    <script>
        //非父子组件通信

        //1.0 使用空实例进行非父子组件通信
        //定义空实例
        //创建步骤是：
        //1、首先定义一个空实例 
        //2、需要给被传递数据的A组件使用$emit绑定自定义事件，并将A组件的数据发布给B组件 
        //3、使用$on订阅A组件发布过来的数据，从而获取数据
        var busVm = new Vue();
        var vm = new Vue({
            el: '#app',
            components: {
                //组件B
                'my-header-1': {
                    template: `<h1>{{message}}</h1>`,
                    data: function() {
                        return {
                            message: "非父子组件通信"
                        };
                    },
                    mounted() {
                        //使用bind（this）修正this
                        busVm.$on("changeEnvents", function(param) {
                            this.message = param;
                        }.bind(this));
                    },
                },
                //组件A
                'my-header-2': {
                    template: `<ul><li @click="getContent" v-for="item in list">{{item}}</li></ul>`,
                    data: function() {
                        return {
                            list: ["第一项", "第二项", "第三项"]
                        };
                    },
                    methods: {
                        getContent: function(ev) {
                            busVm.$emit("changeEnvents", ev.target.innerHTML);
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>

Vuex状态管理　

Vue组件内容分发

单<slot>标签使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <my-header-1>
            <h1>我是标题</h1>
        </my-header-1>

        <my-header-1>
            <my-header-2></my-header-2>
        </my-header-1>

    </div>

    <script>
        //单插槽<slot></slot>
        var vm = new Vue({
            el: '#app',
            components: {
                'my-header-1': {
                    template: `<div>我是头部:<slot></slot></div>`,

                },
                'my-header-2': {
                    template: `<h1>我是标题</h1>`,
                }
            }
        });
    </script>

</body>

</html>

多<slot>标签使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <div id="app">
       
        <my-header-1>
            <button slot="left">←</button>
            <button slot="right">→</button>
        </my-header-1>

    </div>

    <script>


        //多插槽的使用，则使用name属性来指定要插入的位置
        var vm = new Vue({
            el: '#app',
            components: {
                'my-header-1': {
                    template: `<div><slot name="left"></slot> 我是头部:<slot name="right"></slot></div>`,
                },
                'my-header-2': {
                    template: `<h1>我是标题</h1>`,
                }
            }
        });
    </script>

</body>

</html>

<slot>默认值

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <div id="app">

        <my-header-1>
            <button slot="left">←</button>
            <button slot="right">→</button>
        </my-header-1>

    </div>

    <script>
        //多插槽的使用，则使用name属性来指定要插入的位置
        var vm = new Vue({
            el: '#app',
            components: {
                'my-header-1': {
                    template: `<div><slot name="left"></slot> 我是头部:<slot name="right"><button slot="right">+</button></slot></div>`,
                },
                'my-header-2': {
                    template: `<h1>我是标题</h1>`,
                }
            }
        });
    </script>

</body>

</html>

Vue组件开发流程

编写基础HTML和CSS
提取组件
数据传输
内容分发
添加事件和方法

Vue中DOM操作(使用$refs)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-header-1 :list="temp_2_list"></my-header-1>

    </div>
    <!-- 父组件向子组件传递数据的模版,ref特性用于DOM操作，使用this.$refs.row获取添加特性的DOM元素 -->
    <template id="temp-2">
        <div>
                <h1>{{message}}</h1>
                <ul >
                    <li  v-for="item in list" v-on:click="updateStyle" style="color:blue" ref="row">{{item}}</li>
                </ul>
                
            </div>
      </template>

    <script>
        //子组件向父组件传递数据，是发布订阅模式
        var vm = new Vue({
            el: '#app',
            data: {
                temp_2_list: ["1", "2", "3"]
            },
            components: {
                //父组件向子组件传递数据
                'my-header-1': {
                    //props: ["list"],
                    template: '#temp-2',
                    data: function() {
                        return {
                            message: "父组件向子组件传递数据"
                        };
                    },
                    //属性的验证与默认值
                    props: {
                        list: {
                            type: Array,
                            default: ["4", "5", "6"]
                        }
                    },
                    methods: {
                        updateStyle: function(ev) {
                            ev.target.style.color = 'red';
                            // this.$refs.row.style.color = 'red';
                            console.log(this.$refs.row);
                            this.$refs.row.forEach(element => {
                                console.log(element);
                                element.style.color = 'red';
                            });
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

Vue.js 计算器仅能计算一次的解决方案

Vue.js 计算器只能运算一次？修复状态管理与方法名冲突问题

Vue 3 动态注册外部组件的无侵入式集成方案

Vue 3 动态注册外部组件的零侵入式集成方案

Vue 3 中子组件向父组件传递数据的正确方式