Vue 组件

最新推荐文章于 2022-10-09 15:01:49 发布
最新推荐文章于 2022-10-09 15:01:49 发布
阅读量304 收藏 2
点赞数
分类专栏： 重学前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36194388/article/details/119374422
版权

组件

  组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 js 特性进行了扩展的原生 HTML 元素。

总结:

   组件是用来完成特点功能的一个自定义的HTML标签
 例如:

<body>
    <mytag></mytag>
</body>

注意: mytag就是一个组件, 该组件必须通过Vue为mytag赋予一定的功能

组件的作用

组件是对特点功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.

组件分类

全局组件和局部组件

全局组件

1全局组件的语法:
   Vue.component("自定义标签的名字",{配置对象})

2. 全局组件的特点:
   2.1  全局组件可以在任何被挂着的标签中使用.
   2.2  全局组件的配置对象中必须包含template属性

3. 注意事项:
    template中的html必须在一个标签中. 仅且只能有一个根节点.

4. 全局组件应用场景
   如果该组件的特定功能需要在任何被挂着的标签中使用. 推荐使用全局组件

<div id="app">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>

<div id="app1">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //>>1. 定义第一个全局组件
    Vue.component("mycomponent1",{
        template : "<h1>这是第一个全局组件</h1>"
    })

    //>>2. 定义第二个全局组件
    var component2Config = {
        template : "<h1>这是第二个全局组件</h1>"
    };
    Vue.component("mycomponent2",component2Config);

    var app = new Vue({
        el: "#app",
        data: {
        }
    });

    var app1 = new Vue({
        el: "#app1",
        data: {
        }
    });
</script>

局部组件

1. 局部语法:

   var app = new Vue({
    el: "#app",
    data: {},
    components : {
        "局部组件的名字1" : {组件的配置对象}
        "局部组件的名字2" : {组件的配置对象}
    }
  });

2. 局部组件的特点
   局部组件只能够在所挂载的标签中使用.

<div id="app1">
    <mycomponent></mycomponent>
</div>
<div id="app2">
    <mycomponent></mycomponent>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">

    //>>1. 在id=app1挂载的实例的components中定义局部组件
    var app1 = new Vue({
        el: "#app1",
        data: {},
        components : {
            "mycomponent" : {
                template : "<h1>这是一个局部组件</h1>"
            }
        }
    });

    //>>2. 在id=app2的标签中是不能够使用上面app2对象的局部组件.
    var app2 = new Vue({
        el: "#app2",
        data: {}
    });
</script>

组件使用两种HTML模板

两种方式
   1 直接在template属性写上html代码字符串
        template: "html代码的字符串"

   2 将当前网页中的html标签作为模板代码 (大量的HTML不用拼装HTML字符串)
      a. 在网页中定义template标签或者script标签包含模板中需要的html模板代码
       <!--
       <template id="mytemplate">
            <h1>template标签中的html</h1>
        </template>

       <script type="text/template" id="mytemplate">
            <h1>template标签中的html</h1>
        </script>

        -->
      b. template属性上使用上门的html模板代码.
       <!--
        "mycomponent2":{
              template: "#mytemplate" ,  #代表找到对应的html代码作为当前组件的模板代码
        }-->

   3.注意事项:
    如果是script的话建议加上 type="text/template"

<div id="app">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
    <mycomponent3></mycomponent3>
</div>


<template id="mytemplate2">
    <h1>template标签中的html</h1>
</template>
<script type="text/template" id="mytemplate3">
    <h1>script标签中的html</h1>
</script>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {},
        components:{
            "mycomponent1":{
                template: "<h1>这是html标签代码字符串</h1>"
            },
            "mycomponent2":{
                template: "#mytemplate2"
           },
            "mycomponent3":{
                template: "#mytemplate3"
            }
        }
    });
</script>

组件中的数据必须是函数

1. 组件中数据的定义
   语法:

      "组件的名字":{
            template: "",
            data : function(){
                return {
                  键1:值1,
                  键2:值2
                }
            }
       }

2.注意事项:
    2.1  data数据只能够以函数的形式返回,因为函数中可用写其他的业务代码
    2.2  只能够在各自的组件模板中使用各自的组件中的data数据
    2.3  Vue对象中的数据不能够在组件中使用.  组件的数据也不能够在挂载的html标签上使用.

<div id="app">
    {{message}}
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
    <mycomponent3></mycomponent3>
</div>


<template id="mytemplate2">
    <h1>template标签中的html--- {{message}}</h1>
</template>

<script type="text/template" id="mytemplate3">
    <h1>script标签中的html--- {{message}}</h1>
</script>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message: "这是app中的data数据"
        },
        components:{
            "mycomponent1":{
                template: "<h1>这是html标签代码字符串---{{message}}</h1>",
                data :function () {
                    return {
                        message:"组件mycomponent1中的数据"
                    }
                }
            },
            "mycomponent2":{
                template: "#mytemplate2",
                data :function () {
                    return {
                        message:"组件mycomponent2中的数据"
                    }
                }
            },
            "mycomponent3":{
               template: "#mytemplate3",
                data :function () {
                    return {
                        message:"组件mycomponent3中的数据"
                    }
                }
            }
        }
    });

组件中使用引用数据的问题

1. 注意事项:
    1.1 当组件返回一个全新的对象时, 组件在每次使用时都会使用各自的数据对象.
    1.2 当组件返回一个引用的已经存在的对象时, 每个组件都会公用同一个数据对象.

1.<div id="app">
2.    <mycomponent></mycomponent>
3.    <mycomponent></mycomponent>
4.    <mycomponent></mycomponent>
5.    <mycomponent></mycomponent>
6.</div>
7.
8.
9.<template id="mytemplate">
10.    <button @click="counter++">{{counter}}</button>
11.</template>
12.
13.<script type="text/javascript" src="../js/vue.js"></script>
14.<script type="text/javascript">
15.    var data ={ counter: 1};
16.    var app = new Vue({
17.        el: "#app",
18.        components: {
19.            "mycomponent": {
20.                template: "#mytemplate",
21.                /*
22.                该data函数在组件被每次使用时都返回一个全新的对象.
23.                data: function () {
24.                        return {
25.                            counter: 1
26.                        }
27.                },*/
28.
29.                //该data函数在组件被每次使用时公用同一个数据对象.
30.                data: function () {
31.                        return data;
32.                },
33.
34.            }
35.        }
36.    });
37.</script>

组件的父子关系

1. 语法:
    Vue.component("父组件的名字",{
        template: 'html <子组件名字></子组件名字>   html',
        components :{
            子组件的名字: {
                template : "子组件的模板"
            }
        }
    });

   定义在父组件中的组件叫做子组件

2. 注意事项
    2.1 父子模板的html都可以是一个template标签或者script标签
    2.2 子组件只能够在父组件中使用
    2.3.这种写法也适用于局部组件.
    4.4.子组件中可以继续定义子组件

1.<div id="app">
2.    <parent></parent>
3.</div>
4.<script type="text/javascript" src="../js/vue.js"></script>
5.<script type="text/javascript">
6.    Vue.component("parent",{
7.        template: "<h1>这是父模板 <child></child></h1>",
8.        components:{
9.            child:{
10.                template: "<h1>这是子模板</h1>"
11.            }
12.        }
13.    });
14.    var app = new Vue({
15.        el: "#app"
16.    });
17.</script>

Vue应用中的数据给顶级组件

因为每个组件都是独立的. 相互不能够默认情况下相互不能够共享数据.

语法:
    1 期望数据
    Vue.component("mycompenent",{
        props: ["期望数据的名字1", "期望数据的名字2"],
        template: "{{期望数据的名字1}}   {{期望数据的名字2}}",
    });
    var app = new Vue({
        el: "#app",
        data :{
            age :29
        }
    });

    2 在Vue挂着的标签中为组件传递数据
      <mycompenent 期望数据的名字1="值1" :期望数据的名字1="值2"></mycompenent>

语法解释:
  1. 子组件要显式地用 props 选项声明它预期的数据.
  2. 在父组件中使用子组件时, 通过标签属性的形式传递过来. 标签的数据不能够使用功能{{}},只能够使用数据绑定
  3. 如果属性是带有中划线的, 在props中一定要使用驼峰式的写法.

1.<div id="app">
2.    <mycompenent name="小花" :age="age"></mycompenent>
3.</div>
4.<script type="text/javascript" src="../js/vue.js"></script>
5.<script type="text/javascript">
6.    Vue.component("mycompenent",{
7.        props: ["name", "age"],
8.        template: "<h1>姓名: {{name}} 年龄:{{age}}</h1>",
9.    });
10.    var app = new Vue({
11.        el: "#app",
12.        data :{
13.            age :29
14.        }
15.    });
16.</script>

父组件的数据传递给子组件

语法:

    Vue.component("父组件的名字",{
        template: 'html <子组件名字 期望数据的名字1="表达式" 期望数据的名字2="表达式"></子组件名字>   html',
        components :{
            子组件的名字: {
                props:["期望数据的名字1","期望数据的名字2"]
                template : "子组件的模板"
            }
        }
    });

  语法解释:
    1. 子组件要显式地用 props 选项声明它预期的数据.
    2. 在父组件中使用子组件时, 通过标签属性的形式传递过来. 标签的数据不能够使用功能{{}},只能够使用数据绑定
    3. 如果属性是带有中划线的, 在props中一定要使用驼峰式的写法.

1.<div id="app">
2.    <parent></parent>
3.</div>
4.<script type="text/javascript" src="../js/vue.js"></script>
5.<script type="text/javascript">
6.    Vue.component("parent",{
7.        template: "<h1>这是父模板 <child name='张三' :student-age='age'></child></h1>",
8.        data : function () {
9.            return {
10.                age : 29
11.            }
12.        },
13.        components:{
14.            child:{
15.                props:["name","studentAge"],
16.                template: "<h1>这是子模板 姓名:{{name}} 年龄:{{studentAge}}</h1>"
17.            }
18.        }
19.    });
20.    var app = new Vue({
21.        el: "#app",
22.    });
23.    console.log(app);
</script>

时小浅
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue基础-第三章
码化疼
10-19 976
组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素，封装可重用的代 组件注册 全局注册 Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象 全局组件注册后，任何vue实例都可以用 组件基础用 <div id="example"> <!-- 2、 组件使用 组件名...
Vue组件入门
zhangawei123的博客
02-24 209
本文简单介绍一下vue中的组件相关的知识点，包括组件的概念，注册，使用，以及组件之间的通信。内容比较简单，代码内有注释，适合入门。
MyComponent 个人组件目录 u3d学习总结笔记本
闪电黑客的博客
01-18 572
目录 MyComponent_Vector3Constraint 向量\欧拉角约束器 MyComponent_PositionMachine 虚拟位置电机 MyComponent_RotationMachine 虚拟旋转电机 MyComponent_TpsCamera第三人称通用相机 MyComponent_UdpSet UDP通讯发送端 MyComponent_UdpGet UDP...
my-component：组件
02-10
模具应用入门 Stencil是用于使用Web组件构建快速Web应用程序的编译器。 Stencil将最受欢迎的前端框架的最佳概念结合到了编译时而非运行时工具中。 Stencil将TypeScript，JSX，微小的虚拟DOM层，高效的单向数据绑定，异步渲染管道（类似于React Fiber）和延迟加载即用即用，并生成100％基于标准运行的Web组件在任何支持Custom Elements v1规范的浏览器中。 模具组件只是Web组件，因此它们可以在任何主要框架中工作，也可以完全没有框架。 在许多情况下，鉴于浏览器现在具有可用的功能，Stencil可以用作传统前端框架的替代品，尽管肯定不需要这样做。 Stencil还启用了Web组件之上的许多关键功能，特别是服务器端渲染（SSR），而无需运行无头浏览器，预渲染和对象即属性（而不仅仅是字符串）。 入门 要使用Stencil启动新项目，请将此
Vue组件（component方法注册组件和props属性实现组件之间传值）
y17757773039的博客
10-09 3585
Vue注册组件Vue.component，template模板，组件之间使用props属性传值（父传子），简单介绍
vue组件如何被其他项目引用
01-19
自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点： 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包，尤其...
vue组件
01-20
今天带领大家敲一个vue组件小案例 vue对组件的定义：组件是可复用的 Vue 实例 组件之间是互不影响的，一个组件的崩溃，并不会影响整个项目的运行。 全局组件 // 注册全局对象，要写在vue实例的上面 Vue....
VUE组件入门
04-10
VUE组件入门，很基础的ppt，入门的同学可以看下哦！！
vue 组件简介
10-15
主要介绍了vue组件的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
vue组件培训ppt
01-09
vue组件培训ppt VUE组件基础、组件交互、路由、vuex等
My Component.rar
12-07
My Component.rar
Vue 组件复用多次自定义参数操作
10-15
主要介绍了Vue 组件复用多次自定义参数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue组件（全局，局部，动态加载组件）
12-08
vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。 one—-全局组件引入写法：在项目的main.js中： 第一种，在main.js直接写template：’ ...
Vue组件化开发思考
08-28
主要介绍了Vue组件化开发的思考以及相关的原理介绍，如果你对此有兴趣，可以学习参考下。
vue组件开发
10-08
开发数字输入框组件，用来快捷输入一个标准数字。数字输入框只能输入数字，两个按钮，可以加一减一，有控制步伐的功能，可以输入最大值最小值。
（Vue）Vue课后题
热门推荐
博客皆笔记
01-20 4万+
vue九章课后题
mycomponent-connector.js
mengzhihueng的博客
10-21 183
/**  * Created by LyonWu on 2016/10/20.  */ window.com_MyComponent =     function() { // Create the component         var mycomponent =             new mylibrary.MyComponent(this.getElement());
MyComponent
mengzhihueng的博客
10-21 367
package com; import com.google.gwt.json.client.JSONArray; import com.google.gwt.json.client.JSONException; import com.vaadin.annotations.JavaScript; import com.vaadin.ui.AbstractJavaScriptCompon
vue项目webstorm Unknown html tag el
u011340269的博客
03-04 1万+
webstorm vue项目由于node-modules文件过多，IDE左下角一直在Synchronizing files 添加ignore后导致Unknown html tag，解除ignore，并在Settings贴膜位置添加依赖
vue实例是不是vue组件
最新发布
07-30
Vue实例和Vue组件是两个不同的概念。 Vue实例是Vue框架的核心概念，它是通过Vue构造函数创建的对象。Vue实例是Vue应用的根实例，它包含了Vue的各种选项和方法，可以用来定义数据、方法、计算属性、监听属性等。通过...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

时小浅

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

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

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

打赏作者

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

抵扣说明：

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

余额充值