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 相关文章推荐
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
原生JS实现留言板功能
Feb 08 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
Laravel框架表单验证详解
2014/09/04 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
Python map和reduce函数用法示例
2015/02/26 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
机械专业毕业生推荐信范文
2013/11/25 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
大学四年职业生涯规划书范文
2014/01/02 职场文书
精彩自我鉴定
2014/01/16 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
个人查摆剖析材料
2014/10/04 职场文书
分居协议书范本
2014/11/03 职场文书
工商行政处罚决定书
2015/06/24 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
2019财务转正述职报告
2019/06/27 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python
Redis 异步机制
2022/05/15 Redis
go goth封装第三方认证库示例详解
2022/08/14 Golang