Vue学习日记之组件基础

最新推荐文章于 2022-02-28 17:23:11 发布
最新推荐文章于 2022-02-28 17:23:11 发布
阅读量137 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41889956/article/details/94670992
版权

1、组件的概念

   组件是Vue中一个非常重要的概念，相当的重要，每个组件实现特定的功能。

  组件可以看作是可复用的Vue实例。

2、组件的注册

   在Vue中，组件分为全局组件和局部组件，和filter过滤器一样。

   全局组件作用于全局

  局部组件作用于局部，具体的来说是在该vue实例下的div中使用

  2.1、全局组件的注册

    在Vue中使用Vue.component('组件名称','{组件对象}')来创建组件，在html中使用组件名称的标签来使用它。

<div id="app" >
<com1></com1>   //定义的组件名称使用
</div>



<script>
    Vue.component('com1',{
        template:'<h3>这是组件</h3>'   //这里使用了template来创建想要的html模板
    });
    var vm=new Vue({
        el:'#app',
        data:{
            msg:" "
        },
        methods:{
            showParent:function () {
                console.log("这是父组件的方法");
            }
        },
        components:{

        }
    })





</script>

运行结果：

打开调试工具

       

组件中的template中的html模板渲染到了div中。

 

Vue.component('组件名称',组件对象)，其中这个组件对象我们可以单独创建出来。

 var login={
        template:'<h3>这是组件</h3>'
    };
    Vue.component('com1',login);

但是在html模板中使用的依旧是<com1></com1>。

 

我们还可以通过Vue.extend来注册一个组件。

 var login=Vue.extend({
        template:'<h3>这是组件</h3>'
    });
    Vue.component('com1',login);

 

2.2、私有组件的注册

  私有组件的注册是在Vue实例中进行注册的，使用的是Vue实例中的属性，components，同样的在html模板中使用组件名称的html标签来使用

components:{

    组件名称:{

          template:....

       }

   }

<div id="app" >
    <com1></com1>
</div>


<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:" "
        },
        methods:{
            showParent:function () {
                console.log("这是父组件的方法");
            }
        },
        components:{   
           com1:{   //注册的组件名称为com1
               template:'<h3>这是一个组件</h3>'
           }
        }
    })

</script>

运行截图：

 

2.3  <template>创建

  无论是在私有组件还是全局组件中，我们在template:"  "中定义要使用的html模板，但是在这里面定义的html标签没有高亮没有提示，而且显得代码混乱。

    我们可以在html中使用<template id='id'>标签来解决这个问题。

<div id="app" >
    <com1></com1>
</div>
<!--创建template标签存放自己的html内容-->
<template id="combyid"> 
  <h3>这是一个使用template生成的组件</h3>
</template>

<script>
    var comObj={
        template:'#combyid'   //这里的template传入的不再是HTML模板而是一个id
    };
    Vue.component('com1',comObj);

运行截图

  无论是在<template>中编写html，还是在comObj中的template中，只能存在一个根元素，否则会报错！！！

 

3、组件的属性

  作为vue中的重要特性，必备许多必不可少的属性。

3.1、data

    组件是可复用的Vue实例，组件中也存在data，但是data必须是一个函数，且显式的返回一个对象，这个对象中的data和Vue实例中的data一样使用输出。

<div id="app" >
    <com1></com1>
</div>
<template id="combyid">
  <h3>组件中的数据是++++{{msg}}</h3>   <!--data中的数据像Vue实例一样使用-->
</template>

<script>
    var comObj={
        template:'#combyid',
        data:function () {   //data必须是一个function 且要有return一个对象
            return{
                msg:'组件的data'
            }
        }
    };
    Vue.component('com1',comObj);
    var vm=new Vue({
        el:'#app',
        data:{
            msg:" "
        },
        methods:{
            showParent:function () {
                console.log("这是父组件的方法");
            }
        },
        components:{

        }
    })

</script>

运行结果

3.2、methods

   组件中也存在着methods对象，存放着仅供组件使用的方法。

<div id="app" >
    <com1></com1>
</div>
<template id="combyid">
  <div>
      <h3>组件中的数据是++++{{msg}}</h3>
  <!--@click简历一个点击事件触发show方法-->
      <input type="button" value="点击使用show方法" @click="show">
  </div>
</template>

<script>
    var comObj={
        template:'#combyid',
        data:function () {
            return{
                msg:'组件的data'
            }
        },
        methods:{   //存放方法
            show:function () {
                console.log("show被调用");
            }
        }
    };
    Vue.component('com1',comObj);
    var vm=new Vue({
        el:'#app',
        data:{
            msg:" "
        },
        methods:{
            showParent:function () {
                console.log("这是父组件的方法");
            }
        },
        components:{

        }
    })


</script>

运行结果：

3.3、props

  当我们需要从父组件（Vue实例）获取数据时，就需要props。

  1. 在组件的html引用中添加，v-bind:自定义名称='父组件数据'

  2. 在组件对象中的props，注册这一个自定义名称

<div id="app" >
    <!--组件的html引用中，需要添加v-bind:自定义名称="父组件数据"-->
    <com1 v-bind:parentmsg="msg"></com1>
</div>
<template id="combyid">
  <div>
      <h3>组件中的数据是++++{{parentmsg}}</h3>
  </div>
</template>

<script>
    var comObj={
        template:'#combyid',
        data:function () {
            return{
                msg:'组件的data'
            }
        },
        methods:{   //存放方法
            show:function () {
                console.log("show被调用");
                console.log(this);
            }
        },
        //props中需要创建自定义数据名称
        //类似一个包装效果
        props:['parentmsg']   
    };
    Vue.component('com1',comObj);
    var vm=new Vue({
        el:'#app',
        data:{
            msg:"父组件"
        },
        methods:{
            showParent:function () {
                console.log("这是父组件的方法");
            }
        },
        components:{

        }
    })





</script>

运行结果：

当我们父组件中的数据为一个数组或者对象呢？

数组：

<div id="app" >
    <!--组件的html引用中，需要添加v-bind:自定义名称="父组件数据"-->
    <com1 v-bind:parentmsg="msg"></com1>
</div>
<template id="combyid">
  <div>
      <h3 v-for="(item,key) in parentmsg">组件中的数据是++++{{item}}</h3>
  </div>
</template>

<script>
    var comObj={
        template:'#combyid',
        data:function () {
            return{
                msg:'组件的data'
            }
        },
        methods:{   //存放方法
            show:function () {
                console.log("show被调用");
                console.log(this);
            }
        },
        //props中需要创建自定义数据名称
        //类似一个包装效果
        props:['parentmsg']
    };
    Vue.component('com1',comObj);
    var vm=new Vue({
        el:'#app',
        data:{
            msg:['父组件','get',10]
        },
        methods:{
            showParent:function () {
                console.log("这是父组件的方法");
            }
        },
        components:{

        }
    })
</script>

运行结果：

对象：

<div id="app" >
    <!--组件的html引用中，需要添加v-bind:自定义名称="父组件数据"-->
    <com1 v-bind:parentmsg="msg"></com1>
</div>
<template id="combyid">
  <div>
      <h3 v-for="(item,key) in parentmsg">组件中的数据是++++{{key}}:{{item}}</h3>
  </div>
</template>

<script>
    var comObj={
        template:'#combyid',
        data:function () {
            return{
                msg:'组件的data'
            }
        },
        methods:{   //存放方法
            show:function () {
                console.log("show被调用");
                console.log(this);
            }
        },
        //props中需要创建自定义数据名称
        //类似一个包装效果
        props:['parentmsg']
    };
    Vue.component('com1',comObj);
    var vm=new Vue({
        el:'#app',
        data:{
            msg:{
                name:'父组件',
                type:'get',
                value:10}
        },
        methods:{
            showParent:function () {
                console.log("这是父组件的方法");
            }
        },
        components:{

        }
    })
</script>

运行结果：

props最重要的作用是，子组件能够接收到父组件的数据！！！当父组件中的数据是引用类型的话，子组件更改props中的数据，父组件中的数据也会一并更改！！！如果是基本类型的话会报错

<div id="app" >
    <!--组件的html引用中，需要添加v-bind:自定义名称="父组件数据"-->
    <com1 v-bind:parentmsg="msg"></com1>
</div>
<template id="combyid">
  <div>
      <h3 v-for="(item,key) in parentmsg">组件中的数据是++++{{key}}:{{item}}</h3>
      <input value="点击改变父组件的msg" @click="change" type="button">
  </div>
</template>

<script>
    var comObj={
        template:'#combyid',
        data:function () {
            return{
                msg:'组件的data'
            }
        },
        methods:{   //存放方法
            show:function () {
                console.log("show被调用");
                console.log(this);
            },
            change:function () {
                this.parentmsg.value=50;
            }
        },
        //props中需要创建自定义数据名称
        //类似一个包装效果
        props:['parentmsg']
    };
    Vue.component('com1',comObj);
    var vm=new Vue({
        el:'#app',
        data:{
            msg:{
                name:'父组件',
                type:'get',
                value:10}
        },
        methods:{
            showParent:function () {
                console.log("这是父组件的方法");
            }
        },
        components:{

        }
    })
</script>

运行结果：

4、组件间的通信

  4.1、父组件传递数据到子组件

    父组件的数据是通过props传递到子组件的，通过props可以使用父组件的数据。具体例子可看props。

   父组件不止数据，方法都能被子组件使用。具体的做法是

  1. 在组件的html引用中添加v-on:自定义方法="父组件中的方法"

  2. 在组件对象中创建一个方法，这个方法包含了自定义方法的使用

  3. 在组件对象创建的方法中添加"this.$emit('自定义方法')"

  4. 在组件中可以使用这个创建的方法，达到使用父组件方法的目的

<div id="app" >
    <!--组件的html引用中，需要添加v-on:自定义事件="父组件事件名称"-->
    <com1 v-bind:parentmsg="msg" v-on:myclick="showParent"></com1>
</div>
<template id="combyid">
  <div>
      <h3>组件中的数据是++++</h3>
      <input value="点击使用父组件方法" @click="show" type="button">
  </div>
</template>

<script>
    var comObj={
        template:'#combyid',
        data:function () {
            return{

            }
        },
        methods:{
           show:function () {  //定义一个函数，里面包含着自定义事件的使用
               this.$emit('myclick');   //使用this.$emit('自定义事件')
           }
        },
    };
    Vue.component('com1',comObj);
    var vm=new Vue({
        el:'#app',
        data:{
            msg:{
                name:'父组件',
                type:'get',
                value:10}
        },
        methods:{
            showParent:function () {
                console.log("这是父组件的方法");
            }
        },
        components:{

        }
    })
</script>

运行结果：

4.2、子组件传递数据给父组件

   子组件通过自定义的方法将数据传递给父组件

  具体的思想是：子组件能够使用父组件的方法，那么就通过向此方法传递参数来达到传递数据给父组件的目的

<div id="app" >
    <!--组件的html引用中，需要添加v-on:自定义事件="父组件事件名称"-->
    <com1 v-bind:parentmsg="msg" v-on:myclick="showParent"></com1>
</div>
<template id="combyid">
  <div>
      <h3>组件中的数据是++++</h3>
      <input value="点击使用父组件方法" @click="show" type="button">
  </div>
</template>

<script>
    var comObj={
        template:'#combyid',
        data:function () {
            return{
             msg:'子组件的数据'
            }
        },
        methods:{
           show:function () {  //定义一个函数，里面包含着自定义事件的使用
               this.$emit('myclick',this.msg);   //使用this.$emit('自定义事件',参数)传递数据到父组件中
           }
        },
    };
    Vue.component('com1',comObj);
    var vm=new Vue({
        el:'#app',
        data:{
            
            dataSon:null
        },
        methods:{
            showParent:function (item) {
                console.log("这是父组件的方法");
                this.dataSon=item;
               console.log(this.dataSon)
            }
        },
        components:{

        }
    })
</script>

运行结果：

 

啊祝arzhu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习日记19：记事本-组件版
03-26
"vue学习日记19：记事本-组件版"是一个关于如何利用Vue.js创建一个功能丰富的记事本组件的实例教程。在这个项目中，我们将深入探讨Vue组件的基本概念、组件的生命周期、状态管理和事件通信。 首先，Vue组件是Vue...
vue学习日记17：scoped样式冲突
最新发布
03-21
在Vue.js框架中， scoped样式是用于实现组件的样式隔离，它通过添加一个唯一的属性到CSS选择器来确保样式只作用于当前组件。这个特性在开发大型应用时尤其有用，因为它帮助维护代码的整洁和可预测性。然而，有时我们...
Vue学习日记（13）组件
GZN的博客
12-07 402
组件定义、非单文件组件、组件的嵌套
Vue.js 学习日志——组件（九）
不会爬树的程序猿
07-12 647
Vue.js 组件 组件（Component）可以扩展 HTML 元素，封装可重用的代码。 注册一个组件的语法： Vue.component(tagName,options) tagname为组件名，options为配置项。注册后调用组件的方式： <tagName></tagName> 全局组件 <div id="div"> <hel...
Vue学习日志之组件基础
前端啤酒屋
10-07 1005
组件 是Vue中的核心和设计最精妙的地方,他可以有效的提高重用性和可复用性。 全局注册组件的方法： Vue.component('my-component',{ }) my-component就是注册组件的自定义标签 在其中可以添加template属性 还可以添加和vue实例中相同的data，computed，method等（data必须是函数，然后return回数据） for example...
Vue3开发日记
Z_Joker_J的博客
11-29 435
vue3日记
教你从零写vue日历组件
qq_39055970的博客
02-28 1万+
自制vue日历组件前言 前言 最近做项目遇到一个需求，需要制作一个定制化的日历组件，如下图所示，需求大致如下： （2）日历可以按照月份进行上下月的切换。 （2）按照月份展示周一到周日的排班信息。 （3）排版信息分为早班和晚班。 （4）按照日期对排班进行颜色区分：当前月份排班信息正常颜色，今天显示深色，其他月份显示浅色。 （5）点击编辑按钮，日历进入编辑模式。简单点说就是，今天和今天之后的排班右侧都显示一个选择按钮，点击后可弹框编辑当日的排班人员。 .........
vue构建的日记应用来源于君名
08-12
Vue.js 是一款非常流行的前端框架，由尤雨溪开发，用于构建用户界面。"vue构建的日记应用来源于君名"的项目，显然是一款基于Vue.js...通过学习和分析这个项目，开发者可以深化对Vue.js的理解，提高自己的前端开发技能。
基于Vue的uni-app个人日记App
03-04
通过研究这个基于Vue的uni-app个人日记App，开发者不仅能学习到前端开发的基础知识，还能掌握如何利用uni-app进行多平台开发，以及如何组织和管理复杂的前端项目。同时，通过源码阅读，可以提升对Vue.js和uni-app的...
java进阶学习日记
01-08
【Java进阶学习日记】是一份全面且深入的Java学习资料，旨在帮助已经掌握基础的开发者进一步提升技能，同时也适合正在寻找工作的Java学习者作为面试准备。这份学习笔记涵盖了广泛的Java相关主题，从底层的计算机操作...
Vue中使用 iview 之-踩坑日记
weixin_33711647的博客
03-20 977
导航列表： 一、iview单选框Select验证问题 二、iview表单v-if引起的问题 三、Upload 手动上传组件 使用是出现的问题 四、Tabs嵌套使用时的问题 五、Tooltip 换行问题 一、iview单选框Select验证问题 回到顶部 先看下基本案例： //template中 <Select v-model="fo...
Vue2.x学习二：数据渲染
weixin_34111819的博客
05-31 191
之前，我们提到了vue可以解析双大括号中的语法，数据绑定——{{msg}}，以及，列表渲染——v-for。在这一章中，我们将详细说明数据的几种绑定/渲染方式。 单向数据绑定 之前一章中我们提到过，此处，我们通过代码，进行简单回顾。 <body> <div class="container"> &lt...
Vue中data的this指向问题
热门推荐
qq_124917348的博客
08-11 1万+
最近在做自己的项目时遇到一个问题： export default { data(){ return{ id:this.$route.params.id, musicMessage:[], musiclist:{ title:null, ...
Vue项目上使用MUI
qq_124917348的博客
07-26 4940
MUI是一款轻量级的APPUI样式框架，官网地址：http://dev.dcloud.net.cn/mui/，Github：https://github.com/dcloudio/mui，它跟Bootstrap一样，即拿即用。但是需要注意的是，它在npm下是不支持安装的，所以要想在项目中使用它，我们就需要在Gihub上下载，之后将它的dist文件夹下的文件放在项目的第三方引用包文件夹下：....
Vue-router 编写路由跳转的两种方式
qq_124917348的博客
08-11 1444
vue-router是一个基于vue的路由管理工具，这是官网https://router.vuejs.org/zh/guide/essentials/navigation.html 这篇就不过多介绍vue-router了，https://blog.csdn.net/qq_41889956/article/details/95197292这是我的vue-router的基本使用介绍。 我们都知...
Vue学习日记之vue实例生命周期
qq_124917348的博客
06-13 1006
在vue实例开始创建、运行到销毁的过程，就是vue的生命周期 vue生命周期中发生（存在）的事件（这些事件可以用函数来表示），我们称之为生命周期钩子。 即：生命周期钩子=生命周期函数=生命周期事件。 我们看vue官网中存在着这么一张图片，详细的描述了vue的生命周期 1、开始阶段： new Vue({})---------------------开始创建vu...
Vue学习日记之v-for指令的学习
qq_124917348的博客
06-02 604
在vue中我们可以使用一个指令来迭代数组、对象和数字。这个指令就是强大的v-for 使用v-for最重要的是要搭配“(item,key)in list”的特殊语法，list是需要迭代的对象，item是迭代的匀数组元素别名（你也可以理解为迭代的每一项元素），在data中定义，在普通数组和对象数组中，key是索引。再配合插值表达式来输出结果。 1 迭代普通数组 废话不多说，直接...
Vue学习日记之MVC与MVVM
qq_124917348的博客
03-31 485
1、为何要了解MVC与MVVM模式 首先，MVC是后端的分层处理概念，M指的是Model数据处理层，V指的是view视图层，C指的是controll业务逻辑处理层，MVC的出现使得一个项目的开发变得更加简便和清晰，降低了代码之间的耦合程度，项目之间的分功也更加的明确，这时你可能要问了，我们是在学习vue，而且我们是前端工程师，为什么还要了解MVC呢？ 其实，了解MVC有助于我们学习MV...
请写出.vue的日记代码
05-10
这里是一个简单的.vue日记代码示例： ``` <h1>{{ title }} <p>{{ content }} 编辑 export default { data() { return { title: '我的日记', content: '今天天气真好啊！', isEditing: false } },...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值