五、Vue组件

最新推荐文章于 2023-08-15 20:00:09 发布
最新推荐文章于 2023-08-15 20:00:09 发布
阅读量1.2k 收藏 1
点赞数 2
分类专栏： Vue 前端 文章标签： vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lvruoyu/article/details/124335386
版权

04. Vue组件

全局组件

01.Vue.extend()构造全局组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>

    <script>
        /** 全局组件语法格式： Vue.component(tagName,options)
         *  tagName: 是我们的组件名
         *  options：Vue实例的配置对象,el属性不用配置，data、computed、methods、
         *  watch、生命周期函数都是可以配置的；需要注意的是，你在组件中定义data属性时
         *  必须使用函数的方式进行赋值
         * 
         *  创建组件： Vue.extend()
         */
        // 01 定义组件  创建组件
        let myComponent = Vue.extend({
            template: ` <h2> 我们注册的全局组件 </h2> `
        });

        // 02 注册全局组件
        Vue.component("my-component", myComponent);

        let vm = new Vue({
            el: "#app",
            data: {

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

02.Vue.component()构造的时候直接传入配置对象（Vue推荐使用的方式）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>

    <script>
        /** 全局组件语法格式： Vue.component(tagName,options)
         *  tagName: 是我们的组件名
         *  options：Vue实例的配置对象,el属性不用配置，data、computed、methods、
         *  watch、生命周期函数都是可以配置的；需要注意的是，你在组件中定义data属性时
         *  必须使用函数的方式进行赋值
         * 
         *  创建组件： Vue.extend()
         */
        // 01 定义组件  创建组件
        // let myComponent = Vue.extend({
        //     template: ` <h2> 我们注册的全局组件 </h2> `
        // });

        // 02 注册全局组件
        Vue.component("my-component", {
            template: ` <h2> 我们注册的全局组件 </h2> `
        });

        let vm = new Vue({
            el: "#app",
            data: {

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

在这里插入图片描述

03.组件模板有且仅有一个根节点

错误演示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>

    <script>
        /** 全局组件语法格式： Vue.component(tagName,options)
         *  tagName: 是我们的组件名
         *  options：Vue实例的配置对象,el属性不用配置，data、computed、methods、
         *  watch、生命周期函数都是可以配置的；需要注意的是，你在组件中定义data属性时
         *  必须使用函数的方式进行赋值
         * 
         *  创建组件： Vue.extend()
         */
        // 01 定义组件  创建组件
        // let myComponent = Vue.extend({
        //     template: ` <h2> 我们注册的全局组件 </h2> `
        // });

        // 02 注册全局组件
        Vue.component("my-component", {
            template: ` <h2> 我们注册的全局组件 </h2>  <h2> 我们注册的全局组件 </h2> `
        });

        let vm = new Vue({
            el: "#app",
            data: {

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

在这里插入图片描述

正确演示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>

    <script>
        /** 全局组件语法格式： Vue.component(tagName,options)
         *  tagName: 是我们的组件名
         *  options：Vue实例的配置对象,el属性不用配置，data、computed、methods、
         *  watch、生命周期函数都是可以配置的；需要注意的是，你在组件中定义data属性时
         *  必须使用函数的方式进行赋值
         * 
         *  创建组件： Vue.extend()
         */
        // 01 定义组件  创建组件
        // let myComponent = Vue.extend({
        //     template: ` <h2> 我们注册的全局组件 </h2> `
        // });

        // 02 注册全局组件
        Vue.component("my-component", {
            template: ` 
            <div>
            <h2> 我们注册的全局组件 </h2> 
            <h2> 我们注册的全局组件 </h2> 
            </div>
            `
        });

        let vm = new Vue({
            el: "#app",
            data: {

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

在这里插入图片描述

04.组件对象中的data和Vue实例选项中的data的不同

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button-count></button-count>
    </div>

    <script>
        // 01 注册一个名为button-copunt的全局组件
        Vue.component("button-count",{
            data: function(){
                return {
                    count: 0
                }
            },
            template: ` <button @click="count++">单击了{{count}}次的按钮</button> `
        })
        let vm = new Vue({
            el: "#app",
        })
    </script>
</body>
</html>

在这里插入图片描述

错误演示 当以对象的形式给组件中data赋值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button-count></button-count>
        <!-- <button-count></button-count>
        <button-count></button-count> -->
        <button-count1></button-count1>
    </div>

    <script>
        // 01 注册一个名为button-copunt的全局组件
        Vue.component("button-count",{
            data: function(){
                return {
                    count: 0
                }
            },
            template: ` <button @click="count++">单击了{{count}}次的按钮</button> `
        })

        // 01 注册一个名为button-copunt的全局组件
        Vue.component("button-count1",{
            data: {
                count: 0
            },
            template: ` <button @click="count++">单击了{{count}}次的按钮</button> `
        })

        let vm = new Vue({
            el: "#app",
        })
    </script>
</body>
</html>

在这里插入图片描述

为什么非得用函数的形式给组件中data赋值-----是为了让组件被引用是时都有自己独立的数据域
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p> 引用3次相同的组件，组件中的数据相互不影响 </p>
        <button-count></button-count>
        <button-count></button-count>
        <button-count></button-count>
        <!-- <button-count1></button-count1> -->
    </div>

    <script>
        // 01 注册一个名为button-copunt的全局组件
        Vue.component("button-count",{
            data: function(){
                return {
                    count: 0
                }
            },
            template: ` <button @click="count++">单击了{{count}}次的按钮</button> `
        })

        // 01 注册一个名为button-copunt的全局组件
        // Vue.component("button-count1",{
        //     data: {
        //         count: 0
        //     },
        //     template: ` <button @click="count++">单击了{{count}}次的按钮</button> `
        // })

        let vm = new Vue({
            el: "#app",
        })
    </script>
</body>
</html>

在这里插入图片描述

局部组件

01.定义局部组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>

    <script>

        let vm = new Vue({
            el: "#app",
            components: {
                "my-component": {
                    template: ` <h2> 这是我的局部组件 </h2> `
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

写法二
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

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

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

    <script>

        let child = {
            template: ` <h2> 这是我的局部组件 </h2> `
        }
        
        let vm = new Vue({
            el: "#app",
            components: {
                "my-component": child
            }
        })
    </script>
</body>

</html>

写法三
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

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

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

    <script>

        let child = {
            template: ` <h2> 这是我的局部组件 </h2> `
        }

        let mycom = {
            "my-component": child
        }
        
        let vm = new Vue({
            el: "#app",
            components: mycom
        })
    </script>
</body>

</html>

02.子组件只能在父组件中使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

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

<body>
    <div id="app">
        <parent></parent>
    </div>
    <script>
        let child = {
            template: ` <p> 这厮是子组件 </p> `
        }
        let parent = {
            template: ` 
                <div>
                    <p> 这厮是父组件 </p>
                    <child></child>
                </div>
            `,
            components: {
                "child": child
            }
        }
        let vm = new Vue({
            el: "#app",
            components: {
                "parent": parent
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

错误演示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <parent></parent>
        <child></child>
    </div>
    <script>
        let child = {
            template: ` <p> 这厮是子组件 </p> `
        }
        let parent = {
            template: ` 
                <div>
                    <p> 这厮是父组件 </p>
                    <child></child>
                </div>
            `,
            components: {
                "child": child
            }
        }
        let vm = new Vue({
            el: "#app",
            components: {
                "parent": parent
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

铲屎官白茶
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
VUE——组件
Euniceing的博客
11-13 966
vue之组件
vue 组件
jierenjia的博客
07-27 526
大家好，我是IT修真院郑州分院第8期学员，一枚正直善良的web程序员。 今天给大家分享一下，修真院官网JS-12任务中可能会使用到的知识点：   1.背景介绍 Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具链以及各种支持类库结合...
学习记录487@vue单文件组件
教练我想学编程
12-04 199
school组件 <template> <div class="demo"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> </template> <script> export default {
vue组件（一）
刹那的博客
11-12 308
组件定义：封装了重用代码的自定义HTML标签，通过组件可以实现对HTML标签的扩展.组件的注册（创建） 全局组件 在全局范围内都可以使用 Vue.component(组件名称, 组件配置)&lt;code&gt; Vue.component('my-component', { // 该组件被使用的时候返回的结构与样式 //template: '&lt;h1&gt;my-compo
Vue组件（详解）
最新发布
zky__sch的博客
08-15 1002
此文章该说的都说了，还补充了一些额外的相关知识；文章通俗易懂，也举了很多的例子，每讲完一个功能就会带上此功能的代码，和代码在浏览器的执行结果，适合初学者；
vue组件与复用详解
10-18
Vue组件与复用详解 在现代前端开发中，组件化开发已成为提高代码复用率、提高开发效率和保证项目可维护性的关键技术之一。Vue.js作为一个轻量级的JavaScript框架，其组件系统让这一技术实现变得更加简单和高效。...
vue组件如何被其他项目引用
01-19
自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点： 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包，尤其...
vue组件培训ppt
01-09
vue组件培训ppt VUE组件基础、组件交互、路由、vuex等
vue组件学习教程
08-29
"Vue 组件学习教程" Vue 组件是 Vue 框架中的一种基本单元，用于构建复杂的用户界面。学习 Vue 组件是掌握 Vue 框架的关键所在，本文将详细介绍 Vue 组件的学习教程，根据 Vue 官方文档学习的笔记，具有相当的参考...
vue组件-自定义滚动条
06-30
vue组件-自定义滚动条
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏） 、动画组件库、文本编辑器，富文本、Markdown，3D组件库】
热门推荐
程序员猫爪
11-29 2万+
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏） 、动画组件库、文本编辑器，富文本Markdown，3D组件库】
vue组件的3种书写形式
lklmr的专栏
08-19 278
第一种使用script标签 <!DOCTYPE html> <html> <body> <div id="app"> <my-component></my-component> </div> <-- 注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析H
vue ：基本语法格式
weixin_33700350的博客
06-26 282
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue</title> <script src="js/AMjs/vue.min.js"></script></head><body><p&...
vue格式
qq_40197100的博客
01-31 501
Vue后部格式 父子类传参： 组件引用赋值时注意：
Vue 过渡动画 组件 脚手架安装
ILove_bugs的博客
11-25 451
1.过渡动画(了解) 1.一般对元素的添加,修改或者删除时,需要使用过渡动画 2.在大型应用中,使用过渡动画一般在导航切换 3.在vue中使用过渡动画的地方: v-if(条件判断) v-show(条件展示) 动态组件(component) 总结:一般实现过渡动画需要结合CSS样式. 1-1 transition组件 在vue中系统提供了一个组件为transition,将需要实现过渡动画的元素被transition组件进行包裹即可. ​ 语法:
Vue书写格式
m0_58260634的博客
03-28 263
<div id="app"> </div> <script type="text/javascript"> const app =new Vue( { el:'#app', data:{ } }) </script> <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
vue基本格式
gewuzhizhiya的博客
12-21 713
MVVM模式 vue的基本步骤 数据绑定 v-model {{name}}数据渲染 ，双向绑定
.vue组件介绍
weixin_47124112的博客
07-07 935
组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。template -> 组件的模板结构script -> 组件的 JavaScript 行为style -> 组件的样式组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的 组件之间的父子关系 4.1 使用组件的三个步骤 安装Path Autocomplete 插件 敲路径 就会有提示安装完插件，如何还没路径提示，就进入设置里面的settings.json复制下
VUE基本格式
qq_26388781的博客
01-12 742
VUE基本格式
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

铲屎官白茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值