Vue学习之组件用法实例详解


Posted in Javascript onJanuary 06, 2020

本文实例讲述了Vue学习之组件用法。分享给大家供大家参考,具体如下:

Vue中的模块化、可重用代码块将页面细分为一个个功能组件,而且组件之间可以嵌套。组件分为全局组件与局部组件,局部组件在实例中进行注册,并且只可以应用于该实例中。

1、 组件的使用流程:

//1、创建组件构造器
    let overallDiv=Vue.extend({
      template:`
        <div>
          <p>这是一个全局组件div</p>
        </div>
      `
    });
  //2、注册全局组件
    Vue.component('overall-div',overallDiv);
  //3、实例化,组件只有在实例化的div内才能使用,不可以直接在页面中使用
    let vue=new Vue({
      el:'#app',
      data:{},
    //在实例内注册局部组件,其创建与注册可以合为一步来写
    components:{
      'local-div':{
        template:
          ` <div>
              <p>这是一个局部组件div</p>
           </div>
          `
      }
    },
    methods:{
    }
    });

在HTML页面实例化的div中使用组件:

<div id="app">
    <local-div></local-div>
    <overall-div></overall-div>
  </div>

Vue学习之组件用法实例详解

注意:一些HTML标签对放入其中的标签有限制,这时需要通过is属性将组件转化为你要放入的组件,例如<ul>标签下只能放<li>,这时,你可以使用<li is="my-component">,这样就相当于放入了<my-component>标签。

2、template模板

组件的模板除了在js中创建外,还可以使用页面中的template创建模板,注意页面中的模板只能有一个根元素,如有多个元素需要包含在一个div内,例如页面body中的模板:

<template id="myTmp">
    <div>
      <p>这是页面中的模板</p>
    </div>
  </template>

在js中通过id号注册模板。

Vue.component('my-tmp',{
    template:'#myTmp'
  });

3、组件的data

在组件中使用data必须以函数的形式返回,如果以属性值的形式存在,所有的组件会共享一个属性值,更改其中一个,所有的组件都会收到影响。例如一个统计被点击次数的组件:

<template id="myBtn">
    <div>
      <button @click="count++">按钮被点击{{count}}次</button>
    </div>
  </template>
Vue.component('my-btn',{
    template:'#myBtn',
    data () {    //以函数返回的方式定义组件使用的data
      return {
        count:0
      };
    }
  });   
  <div id="app">
    <my-btn></my-btn>
    <my-btn></my-btn>
  </div>

在页面中分别点击两个按钮,两个按钮组件的count分别计数,不会互相干扰:

Vue学习之组件用法实例详解

4、父子组件

先创建子组件,然后再父组件内进行注册,就可以在父组件的模板内使用子组件,然后再注册父组件,这样就可以在外部调用包含子组件的父组件了,外部直接使用父组件接口,而不需要知道内部子组件的实现

注意在外部不能直接使用子组件,因为它只在父组件内进行了注册,外部看不到子组件

let child1=Vue.extend({
    template:`<div>这是子组件1</div>`
  });
  let child2=Vue.extend({
    template:`<div>这是子组件2</div>`
  });
  Vue.component('parent',{
    components:{
      'c1':child1,
      'c2':child2
    },
    //在父组件内调用子组件
    template:`<div>父组件<c1></c1><c2></c2></div>`
  });
  <div id="app">
    <parent></parent>
  </div>

结果如图:

Vue学习之组件用法实例详解

5、插槽slot

像生活中的容器一样,slot允许向其中插入标签、组件等内容,而在外部提供一个框子包装起来。slot分为匿名插槽与实名插槽,匿名插槽可以向其中插入任何类型的内容。

实名slot可以将内容插入指定的插槽内,就像一台电脑的主板,cpu、内存条分别有自己对应的插槽,实名插槽在模板中通过name属性规定插槽的名字,在使用时,通过标签的slot属性指定对应的name,可以将标签插入指定的插槽。

匿名插槽

<!--匿名插槽-->
  <template id="anonymousDiv">
    <div style="width: 20%;">
      <h3>这是插槽头部</h3>
      <slot>插槽默认显示内容</slot>
      <hr/>
      <p>插槽尾部</p>
    </div>
  </template>
  let vue2=new Vue({
    el:'#app2',
    data:{
    },
    components:{
     //绑定匿名插槽
     'anonymous-slot':{
       template:'#anonymousDiv'
     },
     //绑定实名插槽
     'realname-slot':{
       template:'#realnameDiv'
     }
    }
  });

向cpu插槽内插入内容:

<div id="app2">
    <anonymous-slot>
      <p>向插槽中插入一段文字</p>
    </anonymous-slot>
  </div>

插槽未放入内容时:插入一段文字:

Vue学习之组件用法实例详解

实名插槽

<template id="realnameDiv">
<div>
  <h3>实名插槽头部</h3>
  <slot name="cpu">这是cpu插槽</slot>
  <slot name="memery">这是内存条插槽</slot>
  <slot name="HardDisk">这是硬盘插槽</slot>
</div>
</template>
<realname-slot>
  <p slot="cpu">Intel Core i5</p>
</realname-slot>

结果:cpu放入指定插槽,而其他插槽未受影响:

Vue学习之组件用法实例详解

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 #Javascript
Vue学习之axios的使用方法实例分析
Jan 06 #Javascript
vue 微信扫码登录(自定义样式)
Jan 06 #Javascript
React学习之JSX与react事件实例分析
Jan 06 #Javascript
vue学习之Vue-Router用法实例分析
Jan 06 #Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 #Javascript
React学习之受控组件与数据共享实例分析
Jan 06 #Javascript
You might like
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
vuex的使用步骤
2021/01/06 Vue.js
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
windows下python安装小白入门教程
2018/09/18 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
顶撞领导检讨书
2014/01/29 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2016年国培研修日志
2015/11/13 职场文书