搜索
首页web前端js教程Vue组件是什么？Vue组件如何使用？（代码示例）
Vue组件是什么？Vue组件如何使用？（代码示例）
青灯夜游
青灯夜游
Oct 24, 2018 pm 05:38 PM
vuevue组件

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

组件的介绍

  1. 组件系统是将一个大型的界面切分成一个一个更小的可控单元。

  2. 组件是可复用的，可维护的。

  3. 组件具有强大的封装性，易于使用。

  4. 大型应用中，组件与组件之间交互是可以解耦操作的。

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组件的模版方式

  1. \

  2. `

  5. .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非父子组件的通信

  1. 空实例与自定义事件

    1. $emit

    2. $on

  2. Vuex状态管理

    1. state

    2. mutation

    3. 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组件内容分发

    • 单标签使用

<!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>

    • 多标签使用

<!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>

  •   默认值

<!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组件开发流程

  1. 编写基础HTML和CSS

  2. 提取组件

  3. 数据传输

  4. 内容分发

  5. 添加事件和方法

  • 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组件是什么？Vue组件如何使用？（代码示例）的详细内容。更多信息请关注PHP中文网其他相关文章！

      声明
      本文转载于：博客园。如有侵权，请联系admin@php.cn删除
      相关文章
      Vue常见面试题汇总（附答案解析）Vue常见面试题汇总（附答案解析）Apr 08, 2021 pm 07:54 PM

      本篇文章给大家分享一些Vue面试题（附答案解析）。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

      5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

      本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库，希望对大家有所帮助！

      vue中props可以传递函数吗vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

      vue中props可以传递函数；vue中可以将字符串、数组、数字和对象作为props传递，props主要用于组件的传值，目的为了接收外面传过来的数据，语法为“export default {methods: {myFunction() {// ...}}};”。

      手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

      利用vue3.x怎么绘制流程图？下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法，希望对大家有所帮助！

      聊聊vue指令中的修饰符，常用事件修饰符总结聊聊vue指令中的修饰符，常用事件修饰符总结May 09, 2022 am 11:07 AM

      本篇文章带大家聊聊vue指令中的修饰符，对比一下vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！

      如何覆盖组件库样式？React和Vue项目的解决方法浅析如何覆盖组件库样式？React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

      如何覆盖组件库样式？下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法，希望对大家有所帮助！

      通过9个Vue3 组件库，看看聊前端的流行趋势！通过9个Vue3 组件库，看看聊前端的流行趋势！May 07, 2022 am 11:31 AM

      本篇文章给大家分享9个开源的 Vue3 组件库，通过它们聊聊发现的前端的流行趋势，希望对大家有所帮助！

      react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

      react与vue的虚拟dom没有区别；react和vue的虚拟dom都是用js对象来模拟真实DOM，用虚拟DOM的diff来最小化更新真实DOM，可以减小不必要的性能损耗，按颗粒度分为不同的类型比较同层级dom节点，进行增、删、移的操作。

      See all articles

      热AI工具

      Undresser.AI Undress

      Undresser.AI Undress

      人工智能驱动的应用程序，用于创建逼真的裸体照片

      AI Clothes Remover

      AI Clothes Remover

      用于从照片中去除衣服的在线人工智能工具。

      Undress AI Tool

      Undress AI Tool

      免费脱衣服图片

      Clothoff.io

      Clothoff.io

      AI脱衣机

      AI Hentai Generator

      AI Hentai Generator

      免费生成ai无尽的。

      显示更多

      热门文章

      R.E.P.O.能量晶体解释及其做什么（黄色晶体）
      3 周前By尊渡假赌尊渡假赌尊渡假赌
      R.E.P.O.最佳图形设置
      3 周前By尊渡假赌尊渡假赌尊渡假赌
      刺客信条阴影：贝壳谜语解决方案
      1 周前ByDDD
      R.E.P.O.如果您听不到任何人，如何修复音频
      3 周前By尊渡假赌尊渡假赌尊渡假赌
      在哪里可以找到原子中的起重机控制钥匙卡
      1 周前ByDDD
      显示更多

      热工具

      适用于 Eclipse 的 SAP NetWeaver 服务器适配器

      适用于 Eclipse 的 SAP NetWeaver 服务器适配器

      将Eclipse与SAP NetWeaver应用服务器集成。

      mPDF

      mPDF

      mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

      记事本++7.3.1

      记事本++7.3.1

      好用且免费的代码编辑器

      SublimeText3 Mac版

      SublimeText3 Mac版

      神级代码编辑软件(SublimeText3)

      安全考试浏览器

      安全考试浏览器

      Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。

      显示更多

      热门话题

      gmail邮箱登陆入口在哪里
      7416
      15
      CakePHP 教程
      1359
      52
      steam的账户名称是什么格式
      76
      11
      win11激活密钥永久
      26
      19
      显示更多