Vue2 组件的使用

已于 2023-06-05 19:40:14 修改
阅读量2.4k 收藏 1
点赞数
文章标签： vue.js
于 2023-06-05 16:02:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52731478/article/details/131046810
版权

组件

移动端
vant
pc端
elementUi

组件化

将页面或者功能分为多个块，达到区域块或者功能复用的目的
在这里插入图片描述

html 创建组件（组件入门）

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <!-- 4.在Vue实例的作用范围内使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    

    <script>
        // 1.调用Vue.extend()方法创建组件构造器
        let myComponent = Vue.extend({
            template:`
                <div>
                    <h1>我是新创建的组件</h1>
                </div>
            `
        })
        // 2.调用Vue.component(组件名，组件)方法注册组件
        Vue.component('MyComponent',myComponent)


        // 3.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组
    </script>

在这里插入图片描述

全局组件

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 4.在Vue实例的作用范围内使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <hr>
    <div class="box">
        <h1>我是box</h1>
        <!-- 使用全局组件 -->
        <My-Component></My-Component>
    </div>

    <script>
        // 1.调用Vue.extend()方法创建组件构造器
        let myComponent = Vue.extend({
            template:`
                <div>
                    <h1>我是新创建的组件</h1>
                </div>
            `
        })
        // 2.调用Vue.component(组件名，组件)方法注册全局组件
        Vue.component('MyComponent',myComponent)


        // 3.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

        const vm2 = new Vue({
            el:'.box',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            }
        })
    </script>

在这里插入图片描述

局部组件

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 4.在Vue实例的作用范围内使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <hr>
    <div class="box">
        <h1>我是box</h1>
        <!-- 4.在Vue实例的作用范围内使用组件 -->
        <My-Component2></My-Component2>
        <!-- app内的子组件不能在box内使用 -->
        <My-Component></My-Component>
    </div>

    <script>
        // 1.调用Vue.extend()方法创建组件构造器
        let myComponent = Vue.extend({
            template:`
                <div>
                    <h1>我是新创建的组件</h1>
                </div>
            `
        })

        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.创建局部组件，该组件只能在app组件内使用
            components:{
                "MyComponent":myComponent
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

        // 2.创建vue实例
        const vm2 = new Vue({
            el:'.box',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.创建局部组件，该组件只能在box组件内使用
            components:{
                "MyComponent2":myComponent
            }
        })
    </script>

在这里插入图片描述
在这里插入图片描述

全局组件语法糖

<!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 3.在Vue实例的作用范围内使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <hr>
    <div class="box">
        <h1>我是box</h1>
        <!-- 全局组件其他的组件也能用 -->
        <My-Component></My-Component>
    </div>

    <script>
        // 1.全局注册组件语法糖形式
        Vue.component('MyComponent',{
            template:`
                <div>
                    <h1>我是新创建的组件</h1>
                </div>
            `
        })


        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

        // 2.创建vue实例
        const vm2 = new Vue({
            el:'.box',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            }
        })
    </script>

在这里插入图片描述

局部组件语法糖

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 4.在Vue实例的作用范围内使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <hr>
    <div class="box">
        <h1>我是box</h1>
        <My-Component2></My-Component2>
        <!-- app内的子组件不能在box内使用 -->
        <My-Component></My-Component>
    </div>

    <script>
        // 1.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 2.创建局部组件，语法糖形式
            components:{
                "MyComponent":{
                    template:`
                        <div>
                            <h1>我是新创建的组件</h1>
                        </div>
                    `
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

        // 1.创建vue实例
        const vm2 = new Vue({
            el:'.box',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 2.创建局部组件，语法糖形式
            components:{
                "MyComponent2":{
                    template:`
                        <div>
                            <h1>我是新创建的组件</h1>
                        </div>
                    `
                }
            }
        })
    </script>

在这里插入图片描述
在这里插入图片描述

组件抽离写法

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 4.使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <!-- 1.创建模板（模板不会显示） -->
    <template id="MyComponent">
        <div>
            <h1>我是被抽离的组件</h1>
        </div>
    </template>

    <hr>
    <div class="box">
        <h1>我是box</h1>
        <My-Component2></My-Component2>
        <!-- app内的子组件不能在box内使用 -->
        <My-Component></My-Component>
    </div>

    <script>
        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.使用模板
            components:{
                "MyComponent":{
                    template:'#MyComponent'
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

        // 2.创建vue实例
        const vm2 = new Vue({
            el:'.box',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.使用模板
            components:{
                "MyComponent2":{
                    template:'#MyComponent'
                }
            }
        })
    </script>

在这里插入图片描述
在这里插入图片描述

组件内数据的使用

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 4.使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <!-- 1.创建模板（模板不会显示） -->
    <template id="MyComponent">
        <div>
            <h1>我是被抽离的组件</h1>
            <h3>价格：{{price}}</h3>
        </div>
    </template>

    <hr>
    <div class="box">
        <h1>我是box</h1>
        <My-Component2></My-Component2>
        <!-- app内的子组件不能在box内使用 -->
        <My-Component></My-Component>
    </div>

    <script>
        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.使用模板
            components:{
                "MyComponent":{
                    template:'#MyComponent',
                    data(){         //组件内的data必须为函数，目的是防止数据被其他组件污染，比如在app组件内的三个MyComponent组件，其中一个组件内的数据修改，其他的两个组件数据不会改变
                        return{
                            price:3000          //当前的数据只能在app组件内的MyComponent组件内使用
                        }
                    }
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

        // 2.创建vue实例
        const vm2 = new Vue({
            el:'.box',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.使用模板
            components:{
                "MyComponent2":{
                    template:'#MyComponent'
                }
            }
        })
    </script>

在这里插入图片描述
在这里插入图片描述

组件值的改变

    <!-- app与MyComponent为父子关系 -->
    <div class="app">
        <h1>我是app</h1>
        <!-- 4.使用组件 -->
        <!-- 组件名如果是两个单词需要将单词分开用‘-’相连 -->
        <My-Component></My-Component>
        <My-Component></My-Component>
        <My-Component></My-Component>

        <button @click="getAppChildren()">获取app内的所有组件</button>
    </div>

    <!-- 1.创建模板（模板不会显示） -->
    <template id="MyComponent">
        <div>
            <h1>我是被抽离的组件</h1>
            <h3>价格：{{price}}</h3>
            <button @click="add()">+</button>

            <button @click="red()">-</button>
            <button @click="getParent()">获取父组件</button>
            <button @click="getRoot()">获取根组件</button>
        </div>
    </template>

    <hr>
    

    <script>
        // 2.创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                
            },
            methods: {
                getAppChildren(){
                    //console.log(this);      //vm
                    console.log(this.$children);
                    console.log(Array.isArray(this.$children));     //true
                    console.log(this.$children[0].$el);         //打印第一个组件
                }
            },
            // 3.使用模板
            components:{
                "MyComponent":{
                    template:'#MyComponent',
                    data(){         //组件内的data必须为函数，目的是防止数据被其他组件污染，比如在app组件内的三个MyComponent组件，其中一个组件内的数据修改，其他的两个组件数据不会改变
                        return{
                            price:3000          //当前的数据只能在app组件内的MyComponent组件内使用
                        }
                    },
                    methods:{
                        add(){
                            console.dir(this);      //当前调用add方法的MyComponent组件
                            this.price++
                        },
                        red(){
                            this.price--
                        },
                        getParent(){
                            console.dir(this.$parent);      //当前调用add方法的MyComponent组件的父组件，即app组件
                        },
                        getRoot(){
                            console.dir(this.$root);    //当前调用add方法的MyComponent组件的根组件，即app组件
                        }
                    }
                }
            }
        })
        // vm实例有$children属性，属性值为app内的所有子组件（不包括button）所组成的真实数组

在这里插入图片描述

布织锁云
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2组件引入
qq_59717525的博客
11-09 3756
<template> <div class="hello"> <h2> {{ userName }} </h2> <input type="button" value="修改用户名" @click="changeName"> <left class="tt"></left> <right class='tt'/> <img :src="tt" alt=""> </.
图片动态绘制组件 vue2.x
07-14
安装 yarn add vue-image-painter # 或 npm i -S vue-image-painter 引入 // main.js 入口中 import ImagePainter from 'vue-image-painter' Vue.use(ImagePainter) 使用，请参考Demo 源码
vue2将一个页面作为组件来展示
weixin_69218754的博客
01-31 304
vue2将一个页面作为组件来展示
Vue2 (六)：使用组件的三大步骤
weixin_51000853的博客
09-15 1174
使用创建，其中options和时传入的那个options几乎一样，但也有点区别；1）.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。2）.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，。3）.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
vue2中如何使用组件-操作详解
最新发布
Yt0601的博客
04-07 361
vue2组件的使用，分为局部注册和全局注册
VUE2.X全局组件及动态引入组件
温柔咩咩的博客
08-15 3383
VUE2.X全局组件及动态引入组件
vue2项目组件的安装及引用方式
m0_68654266的博客
03-22 449
2.在main.js中。2.在使用的页面中引用。2.main.js中。
Vue2项目架构搭建（五）——组件的引入
qq_27868533的博客
01-19 657
组件是vue最强大的功能之一，一个vue文件就是一个Vue组件，主要包括三部分：template，script，style。        template标签内是写组件视图的地方，但是要注意的一点是  template中的内容必须先包裹一层html标签，否则直接报错，别问为什么，这是铁律。         script标签内主要是引入第三方库、组件、方法和数据调用等。         style
Vue2：组件及组件通信
孤安先生的博客，作者主站正在重构中，敬请期待！
11-11 1082
组件是可复用的 Vue 实例，封装标签，样式和 JS 代码。 组件化 ：封装的思想，把页面上可重用的部分封装为组件，从而方便项目的 开发和维护。简单理解：一个页面， 可以拆分成一个个组件，一个组件就是一个整体，每个组件可以有自己独立的 结构 样式 和 行为 (html, css和js)
【Vue2】组件的使用
Superman_H的博客
02-09 1949
# 模块 & 组件 1. 模块：向外提供特定功能的 JS 程序，一般就是一个 JS 文件 因为 JS 文件很多很复杂，这样做可以复用 JS 代码、简化 JS 的编写、提高 JS 的运行效率 2. 组件：用来实现局部功能效果的代码集合 ( HTML / CSS / JS / images... ) 因为一个界面的功能很复杂，这样做可以复用代码、简化项目结构、提高运行效率 # 组件的使用 - 组件是可复用的 Vue 实例，可配置 `data`、`methods`、`com
Vue2封装自制组件（一）：准备及全局引入
Mib_vi的博客
10-04 419
在使用vue样式的时候总是感觉非常不自在，无论是electron-ui还是iview等样式，用起来都不太理想，修改样式又觉得过于麻烦，定制主题依旧还是有些样式规划令人糟心。这时谁会拒绝自制一款属于自己的主题呢？
【Vue2基础】Vue项目搭建及组件使用
一个正在努力学习的iter
09-22 1467
axios 它的底层是用了 XMLHttpRequest（xhr）方式发送请求和接收响应，xhr 相对于之前讲过的 fetch api 来说，功能更强大，但由于是比较老的 api，不支持 Promise，axios 对 xhr 进行了封装，使之支持 Promise，并提供了对请求、响应的统一拦截功能。为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理。Vue 的组件文件以 .vue 结尾，每个组件由三部分组成。使用图形向导来创建 vue 项目，如下图，输入项目名。
Vue异步组件使用详解
08-30
主要为大家详细介绍了Vue异步组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue拖拽组件使用方法详解
10-17
主要为大家详细介绍了vue拖拽组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue mounted组件的使用
08-27
主要介绍了vue mounted组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue弹窗组件使用方法
08-27
弹窗是一个项目必备的复用利器，这篇文章主要介绍了vue弹窗组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue2的组件
weixin_73577920的博客
01-03 2000
1、组件的作用整个项目都是由组件组成可以让代码复用：相似结构代码可以做成一个组件，直接进行调用就可以使用，提高代码复用性可以让代码具有可维护性（只要改一处，整个引用的部分全部都变）注意点：组件和模块区别模块仅对逻辑进行复用组件针对与结构、逻辑、样式进行复用的UI控件2、组件分类按作用范围分类全局组件：项目中所有地方都可以的组件称为全局组件局部组件(私有组件)：仅有该组件才能使用的组件称为局部组件按照用途来分页面组件自定义组件3、局部组件使用局部组件的具体步骤。
Vue2教程详解五（组件）
一只努力搬砖的打工妹纸
02-21 1718
组件是可复用的Vue实例，因此它们与new Vue接收相同的选项，如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样跟实例特有的选项。 组件是用来实现局部（特定）功能效果的代码(html/css/js)和资源(mp3/mp4/ttf/zip)的集合等 组件的优势：可复用代码，简化项目编码，提高运行效率; 组件的分类：单文件组件（一个文件中只包含有一个组件，大型项目中多用此方法）、非单文件组件（一个文件中包含有n个组件）；局...
Vue-组件-props
qq_46199553的博客
08-30 368
4. 组件之间的父子关系 4.1 使用组件的三个步骤 案例： App.vue <template> <div class="app-container"> <h1>App 根组件</h1> <hr /> <div class="box"> <!-- 渲染 Left 组件和 Right 组件 --> <Left></Left> <Righ
vue2 使用组件
05-30
在 Vue2 中，使用组件需要先注册组件，然后在模板中使用该组件的标签。以下是一个简单的示例： 1. 注册组件 ``` Vue.component('my-component', { template: '<div>Hello, I am a component!</div>' }) ``` 2. 在模板中使用组件 ``` <div id="app"> <my-component></my-component> </div> ``` 以上代码中，我们注册了一个名为 `my-component` 的组件，并在模板中使用了该组件的标签。当 Vue 实例化后，`<my-component>` 将被替换为组件的模板。 当然，组件还可以接受父组件传递的数据和事件，这是组件化开发的重要特性之一。如果需要更多的组件使用方法和组件通信方式，请参考 Vue2 官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值