有时候代码的某一模块可能会经常使用到,那么完全可以把这一模块抽取出来,封装为一个组件,哪里需要用到的时候只需把模块调用即可 。参考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. C++的四种转换(const_cast、static_cast、dynamic_cast、reinterpreter_cast)

    static_cast 相当于C语言中的强制转换:(类型)表达式或类型(表达式),用于各种隐式转换 非const转const.void*转指针.int和char相互转换 用于基类和子类之间的指针和引用 ...

  2. C++指针和引用及区别

    1.变量 首先最重要的,variable的定义,当你申明一个变量的时候,计算机会将指定的一块内存空间和变量名进行绑定:这个定义很简单,但其实很抽象,例如:int x = 5; 这是一句最简单的变量赋值 ...

  3. Apollo安装教程

    最近一直在研究Apollo的安装问题,浪费了几天时间,所有特意来记录一下安装心得. UBUNTU 14.04安装 这个我是把自己的笔记本全部转换为ubuntu系统,操作相对简单,大家可以自行查找,另外 ...

  4. 1.java-谈谈接口

    1.面向接口给程序带来的便利和灵活性 List li = new ArrayLIst(); 为什么不写成 ArrayList li = new ArrayLIst(); 2.接口就相当于一些类的规范, ...

  5. ISR模块

    SM-SRE-700-K9:先来介绍一下这个模块 Q:它是用来干嘛的?A:思科服务就绪引擎模块是思科集成多业务路由器第2代(ISR G2)的高性能路由器刀片,可提供托管思科,第三方和自定义应用程序的功 ...

  6. eclipse提示错误:save could not be completed

    原博客地址:https://blog.csdn.net/alane1986/article/details/6514000 2010年12月06日 19:20:00 alane1986 阅读数:150 ...

  7. 转载:AAC编解码概述

    转自:http://www.cnblogs.com/gaozehua/archive/2012/05/03/2479960.html 编码概述 其整体AAC 编解码系统,如图所示,其编码流程概述如下: ...

  8. C#系统库的源代码

    .NET Core:https://github.com/dotnet/corefx .NET Framework:https://referencesource.microsoft.com

  9. 每天进步一点点------入门视频采集与处理(显示YUV数据)

    做视频采集与处理,自然少不了要学会分析YUV数据.因为从采集的角度来说,一般的视频采集芯片输出的码流一般都是YUV数据流的形式,而从视频处理(例如H.264.MPEG视频编解码)的角度来说,也是在原始 ...

  10. VS2017新建或拷贝项目编译时出现:找不到 Windows SDK 版本8.1.请安装所需的版本的 Windows SDK

    VS2017新建或拷贝项目编译时出现:找不到 Windows SDK 版本8.1.请安装所需的版本的 Windows SDK 或者在项目属性页的问题解决方案 解决方法: 右击项目解决方案, 选择:重定 ...