Vue组件

最新推荐文章于 2024-04-29 13:39:44 发布
最新推荐文章于 2024-04-29 13:39:44 发布
阅读量471 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z_BK9/article/details/126427300
版权

一、基本概念

  1. 组件（Component）的概念：组件即自定义控件（标签）

  2. 组件的用途：组件能够封装可重用代码，扩展HTML标签功能

  3. 组件的本质：是带有名称的可复用实例，可以接受相同的选项对象（除了一些根级特有的选项），提供相同的生命周期钩子

  4. vue组件的功能

    • 能够把页面抽象成多个相对独立的模块

    • 实现代码重用，提高开发效率和代码质量，使得代码易于维护

  5. 组件的分类：

    • 全局组件：不同作用域内均可使用

    • 局部组件：只在定义该组件的作用域内可以使用

二、Vue组件封装过程

  1. 创建一个组件（示例具体说明）

  2. 注册组件

  3. 使用组件

三、注册组件

常用的全局及局部组件的注册代码

<script src="js/vue.js"></script>

<body>
    <div id="app">
        <global-button></global-button>
        <local-button></local-button>
    </div>
    <template id="test1">
        <button>我是一个全局按钮组件</button>
    </template>
    <template id="test2">
        <button>我是一个局部按钮组件</button>
    </template>
    <script>
        Vue.component("GlobalButton", {
            template: "#test1"
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            components: {
                "LocalButton": {
                    template: "#test2"
                }
            },
        })
    </script>
</body>

</html>

四、组件中使用数据

1、数据使用

<body>
    <script src="js/vue.js"></script>
    <div id="app">
        <global-div></global-div>
        <local-div></local-div>
    </div>
    <template id="t1">
        <div>{{msg}}</div>
    </template>
    <template id="t2">
        <div>{{msg}}</div>
    </template>
    <script>
        //全局组件
        Vue.component("GlobalDiv", {
            template: "#t1",
            data() {
                return {
                    msg: "tom"
                }
            },
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            // 局部组件
            components: {
                "LocalDiv": {
                    template: "#t2",
                    data() {
                        return {
                            msg: "tom2"
                        }
                    },
                }
            }
        })
    </script>
</body>

</html>

2、组件定义

直接使用标签

<body>
    <script src="js/vue.js"></script>
    <div id="app">
        <table>
            <row></row>
        </table>
    </div>
    <template id="t1">
        <tr>
            <td>{{name}}</td>
            <td>{{age}}</td>
        </tr>
    </template>
    <script>
        Vue.component("row", {
            template: "#t1",
            data() {
                return {
                    name: "tom",
                    age: 20
                }
            },
        })
        var vm = new Vue({
            el: "#app",
            data: {},
        })
    </script>
</body>

</html>

ol、ul、select的子标签、表格tr中使用is属性来引用

<body>
    <script src="js/vue.js"></script>
    <div id="app">
        <table>
            <tr is="row"></tr>
        </table>
    </div>
    <template id="t1">
        <tr>
            <td>{{name}}</td>
            <td>{{age}}</td>
        </tr>
    </template>
    <script>
        Vue.component("row", {
            template: "#t1",
            data() {
                return {
                    name: "tom",
                    age: 20
                }
            },
        })
        var vm = new Vue({
            el: "#app",
            data: {},
        })
    </script>
</body>
</html>

五、父子组件

1、父子组件的创建

创建单个子组件

<body>
    <script src="js/vue.js"></script>
    <div id="app">
        <lesson-item></lesson-item>
    </div>
    <!-- 子组件内容 -->
    <template id="lessonItemTemplate">
        <div style="float: left; margin-left: 20px;">
            <img :src="src" />
            <h3>{{course}}</h3>
            <div>
                <a href="#">{{desc}}</a>
            </div>
        </div>
    </template>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            components: {
                "LessonItem": {
                    template: "#lessonItemTemplate",
                    data() {
                        return {
                            course: "java",
                            src: "vue.png",
                            desc:"java 很好学"
                        }
                    },
                }
            }
        })
    </script>
</body>

</html>

创建父组件

<script src="js/vue.js"></script>
<body>
    <div id="app">
        <lession-list></lession-list>
    </div>
    <!-- 父组件对应的代码，注意只能template只能有一个根元素，所以要加上div -->
    <template id="LessionListTemplate">
        <div>
            <!-- 对应的子组件 -->
            <lesstion-item></lesstion-item>
            <lesstion-item></lesstion-item>
            <lesstion-item></lesstion-item>
        </div>
    </template>
    <!-- 子组件内容 -->
    <template id="lessonItemTemplate">
        <div style="float: left; margin-left: 20px;">
            <img :src="src" />
            <h3>{{course}}</h3>
            <div>
                <a href="#">{{desc}}</a>
            </div>
        </div>
    </template>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            components: {
                "lessionList": {
                    template: "#LessionListTemplate",
                    components: {
                        "lesstionItem": {
                            template: "#lessonItemTemplate",
                            data() {
                                return {
                                    course: 'vue',
                                    src:"vue.png",
                                    desc:"java 很好学"
                                }
                            },
                        }
                    }
                }
            },

        })
    </script>   
</body>
</html>

2、父组件给子组件传值（使用props传递数据（父组件向子组件传值-正向传值）子组件用props接收值 ）

第一步：在父组件中使用属性传递值

<组件 属性名称1=‘属性值1’ 属性名称2=‘属性值2’></组件>

第二步：在子组件中使用属性名称进行值的接收

 

components: {
    '组件名称': {
        template: '#模板ID',
        props: ['属性名称1', '属性名称2', ...]
   }
}

eg：

<script src="js/vue.js"></script>
<body>
    <div id="app">
        <lession-list></lession-list>
    </div>
    <!-- 父组件对应的代码，注意只能template只能有一个根元素，所以要加上div -->
    <template id="LessionListTemplate">
        <div>
            <!-- 对应的子组件 -->
            <lesstion-item course="java基础" desc="java" src="java.png"></lesstion-item>
            <lesstion-item course="MySql入门" desc="mysql" src="mysql.png"></lesstion-item>
            <lesstion-item course="Vue入门" desc="vue" src="vue.png"></lesstion-item>
        </div>
    </template>
    <!-- 子组件内容 -->
    <template id="lessonItemTemplate">
        <div style="float: left; margin-left: 20px;">
            <img :src="src" />
            <h3>{{course}}</h3>
            <div>
                <a href="#">{{desc}}</a>
            </div>
        </div>
    </template>
    <script>
        var vm = new Vue({
            el: "#app",
            data: { },
            components: {
                "lessionList": {
                    template: "#LessionListTemplate",
                    components: {
                        "lesstionItem": {
                            template: "#lessonItemTemplate",
                            props: ["course", "desc", "src"]

                        }
                    }
                }
            },

        })
    </script>
</body>
</html>

改造：

<script src="js/vue.js"></script>
<body>
    <!-- 根组件 -->
    <div id="app">
        <!-- 子组件 -->
        <lession-list :info="info"></lession-list>
    </div>
    <!-- 父组件对应的代码，注意只能template只能有一个根元素，所以要加上div -->
    <template id="LessionListTemplate">
        <div>
            <!-- 对应的子组件 -->
            <lesstion-item :course="item.course" :desc="item.desc" :src="item.src" v-for="(item, index) in courseList" :key="index"></lesstion-item>
            
            <p>{{info}}</p>
        </div>
    </template>
    <!-- 子组件内容 -->
    <template id="lessonItemTemplate">
        <div style="float: left; margin-left: 20px;">
            <img :src="src" />
            <h3>{{course}}</h3>
            <div>
                <a href="#">{{desc}}</a>
            </div>
        </div>
    </template>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                info:"hello1"
            },
            components: {
                "lessionList": {
                    template: "#LessionListTemplate",
                    props:["info"],
                    data() {
                        return {
                            courseList:[
                                {course:"java基础",desc:"java",src:"java.png"},
                                {course:"MySql入门",desc:"mysql",src:"mysql.png"},
                                {course:"Vue基础",desc:"vue",src:"vue.png"},
                            ]
                        }
                    },
                    components: {
                        "lesstionItem": {
                            template: "#lessonItemTemplate",
                            props: ["course", "desc", "src"]

                        }
                    }
                }
            },

        })
    </script>
</body>
</html>

props特性和非props特性

props特性：父组件借助于属性给子组件传递值，子组件使用props属性进行接收，接收到之后可以在子组件中使用，并且属性不会在dom结构中出现

非props特性：父组件借助于属性给子组件传递值，子组件不进行接收，在子组件中也不能使用，但是属性会出现在dom结构中，父组件传了，子组件没有接收

3、子组件给父组件传值

this.$emit('event',val)

eg：

<body>
    <script src="js/vue.js"></script>
    <div id="app">
        <!-- 3、第二步触发的自定义事件需要绑定一个函数，这个函数是父组件中定义的函数-->
        <my-button @change1="handlerChange"></my-button>
        <my-button @change1="handlerChange"></my-button>
        <div>一共点了{{total}}</div>
    </div>
    <template id="ch1">
        <!-- 1、考虑清楚什么时候传值，比如再单击子组件的某个标记的时候 -->
        <button @click="handlerClick">你点击了{{num}}</button>
    </template>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                total: 0
            },
            methods: {
                // 4、在该函数中就可以接收子组件传递的数据num 
                handlerChange(num) {
                    this.total = this.total + num;
                }
            },
            components: {
                "myButton": {
                    template: "#ch1",
                    data() {
                        return {
                            num: 0
                        }
                    },
                    methods: {
                        handlerClick() {
                            this.num = this.num + 1;
                            // 2、在事件处理函数中使用emit触发自定义事件，在emit中可以传递数据（参数的形式）
                            //注意事件名称不能使用驼峰式命名，不然找不到事件
                            // $代表挂载在this上的vue内部属性
                            this.$emit('change1', 1)
                        }
                    },
                }
            }
        })
    </script>
</body>

</html>

4、组件的原生事件的绑定（事件.native)

Z_BK9
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue -组件
张锦的博客
04-12 4424
1、组件的作用： 组件（Component）是Vue.js最强大的功能之一。. 组件可以扩展HTML元素，封装可以重复使用的代码。. 在较高层次上，组件就是自定义元素，Vue.js的编辑器为它添加特殊功能。 2、组件的分类： 在vue中组件可以分为全局组件和局部组件。 全局组件：所谓的全局组件就是不仅仅可以在一个vue实例中使用，在其他vue实例中也可以使用 的组件。 局部组件：所谓的局部组件就是只能在某个vue实例中使用的组件，在其他的vue实例中不能使 ...
Vue组件详解
热门推荐
月光晒了很凉快的博客
09-07 1万+
组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体，封装性和隔离性非常强。组件化：组件注册分为：全局注册和局部注册语法：，第1个参数是标签名称，第2个参数是一个选项对象。全局组件注册后，任何vue实例都可以用。组件注意事项： 应用：现在我们想要自定义一个标签，并且显示“我是一个标题”的内容，该怎么做呢？ 使用模板字符串生成组件，并且实现组件嵌套： 这种方式，可以使得组件的使用更加灵活，当需要使用全局组件时，就通过插件插入，不用时，就移除。 初始化阶
Vue基础知识总结 3：vue常用标签_vue标签
最新发布
2401_84434880的博客
04-29 325
按钮data: {//定义数据message: '哪吒',abc: 123},methods: {})
vue组件的看法 和 作用
weixin_44556152的博客
07-27 1812
1、组件是可复用的实例，一个网页中某一个部分需要在多场景中使用，可以抽成一个组件进行复用，提高代码复用性 2、组件化开发能大幅度的提高应用开效率、测试性、复用性， 3、组件使用的分类有： 页面组件、通用组件，业务组件一般是登录的组件具有很强的业务性，通用组件： 按钮、表单、输入框。 4、vue组件的特点：vue的组件是基于配置的，框架会自动生成构造函数，它基于vue commpent 这个类扩展自vue,在扩展过程中会继承已经有的选项， 5、vue中常见组件化的技术有： 属性prop、自定义事件、插槽等，主
Vue---组件详解
北极星的博客
04-17 3207
文章目录一.组件的作用二.使用组件三.全局注册和局部组注册四.父组件和子组件五.注册组件的语法糖写法 一.组件的作用 我们在开发过程中，会复用许多的代码，我们不会写许多重复的代码，这样也会使我们的代码变得很臃肿，我们在c语言的学习过程中，使用到了函数来封装我们的函数来实现代码的复用，我们在vue中，可以使用组件来封装我们的代码。组件可以使我们很轻易地对我们的代码进行修改，任何我们所看到的页面都可以分解成组件。如下： 官方文档的例子，我们将一个页面分解为一颗树。 二.使用组件 创建组件构造器 我们通过
vue组件如何被其他项目引用
01-19
自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点： 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包，尤其...
VUE组件入门
04-10
VUE组件入门，很基础的ppt，入门的同学可以看下哦！！
vue组件培训ppt
01-09
vue组件培训ppt VUE组件基础、组件交互、路由、vuex等
vue 组件简介
10-15
主要介绍了vue组件的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
vue组件编写之todolist组件实例详解
08-28
Vue 组件编写之 TodoList 组件实例详解 本文将详细介绍 Vue 组件编写之 TodoList 组件的实例讲解，主要包括组件注册、模板编写、样式设计、事件处理等方面的知识点。 组件注册 在 Vue 中，组件注册是指将一个组件...
封装canvas各种方法的vue组件
09-07
在本例中，“封装canvas各种方法的vue组件”意味着开发者已经将常见的Canvas操作（如绘图、文字处理等）封装在一个自定义的Vue组件里，方便在项目中多次使用，提高了代码的复用性和可维护性。 其次，`Canvas API`...
vue组件（全局，局部，动态加载组件）
12-08
vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。 one—-全局组件引入写法：在项目的main.js中： 第一种，在main.js直接写template：’ ...
VUE组件练习：VUE.rar
11-30
在"VUE.rar"这个压缩包中，我们有两个关键文件：vue.js 和 VUE08，它们分别代表Vue.js的核心库文件和一个可能是第八个练习的Vue组件。 首先，让我们深入了解Vue.js的核心特性： 1. **组件化**：Vue.js 的核心理念...
Vue 组件的概念、组件的分类、组件的使用、组件之间的通信等方面
百度一下 猎人社区
05-13 1567
在这篇文章中，我们将介绍 Vue 组件的概念、组件的分类、组件的使用、组件之间的通信等方面，希望能够为您的面试做好充分准备。props 是 Vue 中用于从父组件向子组件传输数据的机制，在父组件中通过 v-bind 指令将数据绑定到子组件的属性上，在子组件中可以访问这些属性，并基于这些属性来渲染自己的模板。相比于传统的模板引擎，Vue 中的组件可以极大地提高代码的可读性和可维护性，同时也可以让应用程序的开发变得更加高效，因为我们可以复用已有的组件，而无需每次都重新编写代码。四、Vue 组件之间的通信。
VUE——组件
Euniceing的博客
11-13 960
vue之组件
vue3---组件基础(上)保姆级篇
qq_61950936的博客
08-15 9634
关于 vue3 基础学习，前面两篇博客讲了单页面应用程序、vite 的基本使用。这期就来一篇多一点的吧！这期主要内容有：组件化开发思想、vue 组件的构成、组件的基本使用、封装组件的案例。看完这些，砸门也就详细了解什么是组件了。废话不多说，直接上刺刀！！组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。ibootstrap - Bootstrap可视化布局系统所展示的效果，就契合了组件化开发的思想。.........
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值