有时候代码的某一模块可能会经常使用到,那么完全可以把这一模块抽取出来,封装为一个组件,哪里需要用到的时候只需把模块调用即可 。参考vue官方 https://cn.vuejs.org/v2/guide/components.html

这里用一段代码

<div id="components-demo"> //注意组件名称不能驼峰命名,否则不渲染,也不报错
<button v-on:click="count++">You clicked me {{ count }} times.</button>
</div>

因为这个点击按钮button会经常被用到,所以在这里要把这个button模块给抽取出来,做为一个组件

组件抽取

例:// 定义一个名为 button-counter 的新组件

Vue.component('button-counter', {
data: function () {
return {
count:
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
 methods:{
    .......
  }
})
注意:组件是可复用的VUE实例,所以他接收和new Vue实例同样的选项,如 datacomputedwatchmethods 以及生命周期钩子等。

复用组件

例:

<div id="components-demo">
<button-counter></button-counter>
</div>

ok!完事儿

vue 组件,以及组件的复用的更多相关文章

  1. vue中如何编写可复用的组件?

    原文地址 Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日 ...

  2. Vue.js说说组件

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

  3. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  4. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  5. vue.js之组件(上篇)

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  6. vue.js之组件篇

    Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...

  7. vue(3)—— vue的全局组件、局部组件

    组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...

  8. Vue组件以及组件之间的通信

    一.组件的注册 1. 全局组件注册 1. 注册基本语法Vue.component Vue.component("my_header", { template: `<div&g ...

  9. vue学习之组件

    组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...

  10. vue中的组件化

    组件化 1.定义全局组件 1.要在父实例中使用某个组件,组件必须在实例值之前定义2.组件其实也是一个Vue实例,因此它在定义时也会接收:data.methond.生命周期函数等3.不同的组件不会与页面 ...

随机推荐

  1. STA之RC Corner

    RC corner,这里的RC指gate跟network的寄生参数,寄生参数抽取工具根据电路的物理信息,抽取出电路的电阻电容值,再以寄生参数文件输入给STA工具,常见的寄生参数文件格式为SPEF. I ...

  2. 【做题笔记】P1090 合并果子

    题目大意:给定 \(n\) 个数,每次可以任意选两个数 \(a_i,a_j\) 相加,把相加的结果作为一个新数继续执行此操作,直到只剩一个数为止.现要求使最后得出的这个数最小. 一个显然的贪心策略:每 ...

  3. kbhit函数说明

    kbhit,用来检测键盘是否被敲击.所以就有了他的名字:keyboard hit 当键盘有按键被按下时,kbhit函数就会返回一个非0值. 当我们在写某个程序时,希望读入一些字符,但是又不能停在那里只 ...

  4. linux下建立多级文件目录

    linux下使用mkdir可以创建目录,使用mkdir -p参数就可以创建: mkdir -p /home/orale/duqiang1/duqiang2   如果父目录存在也不会报错.

  5. k8s默认存储动态挂载分配配置

    k8s默认存储动态挂载分配配置 k8s默认存储动态挂载分配配置 https://blog.csdn.net/BigData_Mining/article/details/96973871

  6. python evel()的用法

    老生常谈部分: eval(expression[, globals[, locals]]) expression -- 表达式. globals -- 变量作用域,全局命名空间,如果被提供,则必须是一 ...

  7. Java进阶学习(4)之继承与多态(上)

    继承 媒体资料库的设计 代码复制是质量不良的表现 不具有可扩展性和可维护性 继承 子类父类关系 子类继承了什么 先定义初始化,后构造器 子类和父类的关系 子类有变量和父类变量相同时,父类变量隐藏 父类 ...

  8. [Leetcode] 攻略计划

    在同龄人中我的逻辑思维应该是中下水平,要好好练练.而训练的内容之一,就是解决信息问题,锻炼建模能力. 今天先从队列和栈开始,这两种数据结构大概是计算机和许多程序中最重要的组成部分了.

  9. shell笔记1

  10. C语言实例-大小写字母间的转换

    初学C语言都会遇到要求写大小写转换的题目 这类题目主要通过ASCII(美国信息交换标准代码)码差值实现,A对应ASCII码十进制数字是65,a对应ASCII码十进制数字是97,即大小写字母之间ASCI ...