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 相关文章推荐
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
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
PHP音乐采集(部分代码)
2007/02/14 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
JavaScript中this详解
2015/09/01 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
关于python列表增加元素的三种操作方法
2018/08/22 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python输出pdf文档的实例
2020/02/13 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
波兰购物网站:MALL.PL
2019/05/01 全球购物
软件测试面试题
2015/10/21 面试题
《灯光》教学反思
2014/02/08 职场文书
大学生简短的自我评价
2014/09/12 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
python urllib库的使用详解
2021/04/13 Python
PHP使用QR Code生成二维码实例
2021/07/07 PHP
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle