Vue-第四章Vue组件

最新推荐文章于 2024-10-18 15:58:53 发布
最新推荐文章于 2024-10-18 15:58:53 发布
阅读量461 收藏
点赞数
分类专栏： # Vue 文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55959870/article/details/122410278
版权

目录

4.1Vue组件的介绍

4.2Vue组件的使用

4.3组件之间的通信

4.4Vue的插槽

4.1Vue组件的介绍


Vue提供灵活的组件系统。使用Vue组件可以将可复用的小组件
|构建成大型应用。Vue组件中可以自定义标签，并拥有自身的模板、
样式和交互。
1. Vue组件介绍
2. Vue组件的使用
3. 组件之间的通信
4. Vue的插槽


Vue组件的介绍
组件系统是Vue中一个重要的概念，它提供了一种抽象，可以使
用独立和可复用的小组件来构建大型应用，任意类型的应用界面都可
以抽象为一个组件树。
组件是可复用的Vue实例且带有一个名字。组件可以扩展HTML
元素，封装可重用的HTML代码，可将组件看作自定义的HTML元素
 

Vue组件的使用
注册组件过程又细分为全局注册和局部注册。
1.全局注册
全局注册就是调用Vue.component()注册组件，全局注册的组件可以在
当前页面的任意Vue实例下使用。
2.局部注册
如果不需要全局注册，或者是让组件在其他组件内使用，可以在Vue实
例化时，设置选项参数的components参数属性实现局部注册。

全局组件的案例

<div id="app1">
        <h1>Vue实例1</h1>
        <my-comp></my-comp>
    </div>
    <div id="app2">
        <h1>Vue实例2</h1>
        <my-comp></my-comp>
    </div>
    <script src="/js/vue.min.js"></script>
    <script>
        //创建组件
        var myComp = Vue.extend({
                template: "<h1>使用vue全局组件</h1>"
            })
            //注册组件
        Vue.component("my-comp", myComp);

        var vm = new Vue({
            el: "#app1"
        })
        var vm = new Vue({
            el: "#app2"
        })
    </script>

局部组件的案例

<div id="app1">
        <h1>Vue实例1</h1>
        <my-comp></my-comp>
    </div>
    <div id="app2">
        <h1>Vue实例2</h1>
        <my-comp></my-comp>
    </div>
    <script src="/js/vue.min.js"></script>
    <script>
        //创建组件
        var myComp = Vue.extend({
            template: "<h1>使用vue全局组件</h1>"
        })

        var vm = new Vue({
            el: "#app1",
            //注册组件
            components: {
                "my-comp": myComp
            }
        })
        var vm = new Vue({
            el: "#app2"
        })
    </script>


4.2Vue组件的使用


3.组件注册语法
Vue.js为了简化这个过程，提供了注册语法糖，即在注册组件时直接创
建和注册组件，Vue在背后会自动地调用Vue.extend()。
(1 )简化全局注册:
11全局注册，my-comp是组件标签名称
   //全局注册组件
    Vue.component("my-comp", myComp);
(2)简化局部注册

 var vm = new Vue({
            el: "#app1",
            //局部注册组件
            components: {
                "my-comp": myComp
            }
        })    
    
自定义组件模板案例

  <div id="app1">
        <h1>Vue实例1</h1>
        <my-comp></my-comp>

    </div>
    <div id="app2">
        <h1>Vue实例2</h1>
        <my-comp></my-comp>
    </div>

    <!-- //自定义组件 -->
    <template id="myComp">
        <h1>使用template标签自定义组件模板</h1>
    </template>

    <script src="/js/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app1",
            //局部注册组件
            components: {
                "my-comp": {
                    template: "#myComp"
                }
            }
        })
        var vm = new Vue({
            el: "#app2",
            //局部注册组件
            components: {
                "my-comp": {
                    template: "#myComp"
                }
            }
        })
    </script>

4.组件的data和el选项:
一般实例化Vue的多 数选项也可以用在Vue.extend()或Vue.component()
中的，不过有两个特殊选项参数除外，即data和el。
”Vue.js规定: 在定义组件的选项时， data和el选项必须使用函数。
如果data选项指向某个对象，这意味着所有的组件实例共用一个data。
使用一个函数作为data选项，让这个函数返回一个新对象。
 

自定义组件传值案例


    <div id="app1">
        <!-- 使用控件 -->
        <fruit-list-comp></fruit-list-comp>
    </div>

    <!-- //自定义组件 -->
    <template id="myFuit">
        <div>
            <ul>
                <li v-for="fruit in fruitList">{{fruit}}</li>
            </ul>
        </div>
    </template>

    <script src="/js/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app1",
            //局部注册组件
            components: {
                "fruit-list-comp": {
                    data: function() {
                        return {
                            fruitList: [
                                "火龙果",
                                "刺角瓜",
                                "莲雾",
                                "佛手湖"
                            ]
                        }
                    },
                    template: "#myFuit"
                }
            }
        })
    </script>

4.3组件之间的通信

1.父组件和子组件:
可以在组件中定义并使用其他组件，这就构成了父子组件的关系，子组
件是在父组件中注册的，只能在父组件中使用，确切地说，子组件只能在父
组件的template中使用。
请注意下面两种子组件的使用方式是错误的:
(1)以子标签的形式在父组件中使用。
(2)在父组件标签外使用子组件。
 

父内调用子控件

 <div id="app1">
        <!-- 使用控件 -->
        <parent-comp></parent-comp>
    </div>

    <script src="/js/vue.min.js"></script>
    <script>
        // 创建子组件
        var child = Vue.extend({
            template: "<p>这是子组件</p>"
        });
        // 创建子组件
        var parent = Vue.extend({
            template: "<p>这是父组件<child-comp></child-comp></p>",
            components: {
                "child-comp": child
            }
        });
        //注册父组件
        Vue.component("parent-comp", parent)
        var vm = new Vue({
            el: '#app1'
        })
    </script>

2.通过props向子组件传递数据:
组件实例的作用域是孤立的，这意味着不能并且不应该在子组件的模板
内直接引用父组件的数据，可以使用props把数据传给子组件。
-一个组件默认可以拥有任意数量的props (属性) ，任何值都可以传递 |
给任何props。在组件中，使用选项props来声明需要从父组件中接收的数据
props的值可以是两种:一种是字符串数组;另一种是对象。
语法1
components:{
     "控件名":{
    props:["值名","isStyle"],
    template:"父组件名",
    }
}
语法2
components:{
     "控件名":{
    props:{
    值名:string //类型
    }
    template:"父组件名",
    }
}

  <div id="app">
        <!-- 使用父组件 -->
        <banner-component message="消夏玩一夏！" v-bind:is-style="isShowStyle"></banner-component>
    </div>
    <!-- 创建子组件 -->
    <template id="childComp">
        <span>{{ subMessage}}</span>
    </template>
    <!-- 创建父组件 -->
    <template id="parentComp">
        <div>
            <h1 :class="{banner:isStyle}">
                {{message}}
                  <!-- 使用子组件 -->
                <child-compontent sub-message="不玩就out啦!"></child-compontent>
            </h1>
        </div>
    </template>


    <script src="/js/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isShowStyle: true
            },
            // 注册父组件
            components: {
                "banner-component": {
                    props: ["message", "isStyle"], //数组语法
                    template: "#parentComp",
                    // 注册子组件
                    components: {
                        "child-compontent": {
                            props: {
                                subMessage: String //声明对象语法
                            },
                            template: "#childComp"
                        }
                    }
                }
            }
        });
    </script>



4.4Vue的插槽


插槽( Slot)是Vue提出来的一个概念，正如名字一样，用于将
所携带的内容插入到指定的某个位置，从而使模板分块，具有模块化
的特质和更大的重用性。
插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显
示就由子组件来进行控制。
通过定义一个或多个<slot>标签，可将外部标记引入到组件的虚
拟DOM中进行渲染，相当于“在此处渲染用户的标记”
插槽有两种使用方式:默认插槽和具名插槽。

下面是插槽的案例

<div id="app">
        <p-comp>
             <!-- 具名插槽使用 -->
            <template slot="header">
                <h1>管理</h1> 
            </template>
             <!-- 默认插槽使用 -->
             默认插槽
             <!-- 具名插槽使用 -->
            <template slot="footer">
                <h2>版权声明</h2>
            </template>
        </p-comp>
    </div>

    <!-- 创建组件 -->
    <template id="pComp">
        <div>
            <!-- 具名插槽 -->
            <slot name="header"></slot>    
            <!-- 默认插槽 -->
            <slot></slot>
            <!-- 具名插槽 -->
            <slot name="footer"></slot>    
        </div>
    </template>



    <script src="/js/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            // 注册组件
            components: {
                "p-comp": {
                    template: "#pComp"
                }
            }
        });
    </script>

作用域插槽的使用
插槽可以控制HTML模板的显示与不显示。
作用域插槽( slot-scope )其实就是带数据的插槽。原来父组件
可以通过绑定数据传递给子组件，而作用域插槽可以通过子组件绑定
数据传递给父组件。
作用域插槽的使用场景:既可以复用子组件的slot,又可以使slot
内容不一 致。
 

作用域插槽案例，有些绕慢慢理解

  <div id="app">
        <book-list :books="bookList">
            <template slot="book" slot-scope="props">
                <li>{{props.bookname}}</li>
            </template>
        </book-list>
    </div>

    <!-- 创建组件 -->
    <template id="bookComp">
        <div>
            <ul>
                <slot name="book" v-for="book in books" :bookname="book.name"></slot>
            </ul>
        </div>
    </template>

    <script src="/js/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                bookList: [{
                    name: "vue实战"
                }, {
                    name: "123456"
                }, {
                    name: "ASP.NET"
                }]
            },
            // 注册组件
            components: {
                "book-list": {
                    props: ["books"],
                    template: "#bookComp"
                }
            }
        });
    </script>

张飞飞啦啦
关注
专栏目录
Vue组件【概述，三个步骤，data，＜script＞标签，＜template＞标签，组件注册语法糖，全局注册和局部注册】
略懂一点的少年的博客
06-16 525
一，Vue组件概述 Vue组件是Vue的一个重要概念，它提供了一种抽象的方法，可以使用独立和可复用的小组件来构成大型应用 正因为有Vue组件才使得Vue框架在前端开发中被大量使用，并快速成长为世界级的前端框架。 Vue组件的作用就是对标签的自定义，对HTML元素的扩展 二，组件的使用步骤 三个步骤 1，创建组件：调用Vue.extend（）方法创建组件 2，注册组件：调用Vue.component()方法注册组件。 3，使用组件：使用Vue页面内自定义组件标签 ...
Vue-第4章 深入理解 Vue 组件
07-29
在深入理解Vue组件时，我们需要探讨组件的定义、用途、类型、属性、事件、生命周期以及如何进行组件的复用和通信。以下是对这些关键知识点的详细阐述。 1. **组件定义**：Vue组件是可重用的代码块，它们可以被视为...
vue的强大功能---组件
wangjie962311的博客
06-01 664
组建介绍组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树： 那么什么是组件呢？组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。组件的创建和注册Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件。 一个小小的demo来说明一下，这个
Vue高效前端开发-Vue组件
PROBIE_的博客
06-30 419
Vue组件 代码复用一直是软件开发过程中长期存在的一个问题，每个开发者都想再次使用之前写好的代码，又担心引用代码后会对程序产生影响。所以Vue就提供了组件系统，并且支持自定义标签和原生html元素的拓展。 vue组件使用的3个步骤 创建组件，调用Vue.extend()创建 注册组件，调用Vue.component()注册 使用组件，使用Vue实例页面内自定义组件标签 例： <body> <div id="app"> <hua-zhongxian&g
uniapp 学习笔记四 组件使用和参数传递事件触发
Ggome的博客
08-25 1080
uniapp 学习笔记四 组件使用和参数传递事件触发。组件 test-my-comp.vue。
Vue.js 3.0 学习笔记（九）组件和组合API
qq_44648936的博客
03-12 386
一、组件是什么 组件是Vue中的一个重要概念，它是一种抽象，是一个可以复用的Vue实例 二、组件的注册 1、全局注册 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全局注册组件</title> </head> <body> <div id="app"> <!--使用my-component组件--&
vue-date-range-picker-使用Bootstrap 4样式进行日期范围选择的Vue组件-Vue.js开发
05-27
选择第二个日期范围不集成：使用自己喜欢的vue组件或js库进行DIY Bootstrap 4样式（需要Bootstrap 4 CSS）返回Moment.js实例（需要moment.js）安装npm install- -save @ owumaro / vue-date-range-picker用法Webpack...
vue-admin-template-4.4.0.zip
03-01
4. **Vue-admin-template**：这个模板可能包含了一些常见的后台管理界面元素，如表格、表单、图表、分页、多级菜单等。它可能已经预配置了axios库用于HTTP请求，Element UI或Ant Design Vue等UI组件库，以及Vue ...
Vue-第2章 Vue 起步
07-29
在"Vue-第2章 Vue 起步"的学习中，我们将深入理解Vue的核心概念，包括安装、基本语法、数据绑定、指令系统以及组件的创建与使用。 1. **安装Vue** 在开始Vue的学习之前，首先需要将其安装到项目环境中。Vue可以...
VUE学习之父组件监听子组件生命周期钩子函数
liubangbo的专栏
05-28 2472
父组件监听子组件生命周期钩子函数，这个应该很好做，在父组件中v-on 在子组件中$emit 就可以了。 就是子组件向父组件通信问题。 代码如下： <div id="app"> <child-comp @child-event="handleChildEvent" ></child-comp> </div> ...
VUE源码分析之子组件向父组件通过$emit传递数据过程
liubangbo的专栏
09-19 514
还是从一个简单例子看下这个过程： <script src="./vue.js"></script> <div id="app"> <child-comp @child-event= "'handleChildEvent'"> </child-comp> </div> <scri...
vue组件的3种书写形式
热门推荐
久如云漂泊
05-18 5万+
第一种 使用script标签<!DOCTYPE html> <html> <body> <div id="app"> <my-component></my-component> </div> <-- 注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在
Vue基础知识总结 4：vue组件化开发
学Java，找哪吒
07-21 1万+
一、函数式编程 1、函数式编程简介 函数式编程是种编程方式，它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算（lambda calculus），而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。 和指令式编程相比，函数式编程强调函数的计算比指令的执行重要。 和过程化编程相比，函数式编程里函数的计算可随时调用。 filter函数自动过滤对象的所有元素，返回true才会存入指定对象； Reduce函数对数组内部的所有元素进行汇总； 2、代码实例 <!DOCTYPE
vue 递归组件实现目录树，数据处理
min的博客
01-10 800
vue 实现目录树 递归组件 菜单展收
vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】
在写作的路上持续输出。
09-19 2520
vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】
Vue组件化编程
奔腾游子
04-27 1040
前言 上一章我们讲解了Vue的核心功能，也就是核心库；我们是在每一个页面中都去引入vue.js文件；然后通过new Vue()来进行View和Model的管理；但是目前为止，我们还存在一个问题，比如A页面需要定义某个功能，这个功能肯定涉及到data的数据，或者一些methods的行为；那么如果我们在B页面也需要相同的功能呢？难道我们要重新定义一份吗？显然肯定不行。那么组件的必要性就出来了； 那么从上述的理解来说：这个公用的功能可能要包含三部分：HTML代码、CSS代码、vm实例； 一、vue 组件 组件的出
jeecg3版本的vue，离线启动
sharesb的博客
10-16 338
jeecg的vue2版本已经停止维护，所以只能用vue3的版本。3版本中使用的是pnpm（npm的增强版本）下载依赖。使用pnpm安装的node_modules，不能直接复制到离线主机中（因为在 pnpm安装过程中，会给依赖的配置文件写死绝对路径，并且会在c盘生成缓存）。所以要在离线主机中启动，需要1.在联网机器上下载依赖保存到某个文件夹2.在离线主机中安装node，并配置环境变量3.在离线主机中，让npm加载第一步下载的依赖4.在离线主机中，npm正常安装。
原型链+instanceof+Vue底层原理
最新发布
m0_65985318的博客
10-18 911
在 Vue 组件中，render 函数是一个选项，它返回一个虚拟节点 (VNode)，或者是一个包含多个 VNode 的数组。
Vue项目实战：vue-datepicker组件使用详解
在你的Vue组件中，需要导入刚刚安装的vue-datepicker。例如，在`script`标签内： ```javascript import myDatepicker from 'vue-datepicker' ``` 然后在`components`对象中声明该组件： ```javascript export...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值