简介

组件是可复用的 Vue 实例。

本质上是一个对象,该对象包含datacomputedwatchmethodsfilters以及生命周期钩子等成员属性。

组件结构:


{
data(){
return {
//
}
},
computed:{
displayName(){
return '';
}
},
methods:{
onClickHandler(params){
// do something
}
}
}

基础知识

data属性

  • data属性维护一个组件内部状态,其余组件正常情况下不可见。

    • 可以通过props传递给子组件;
    • 可以通过$emit的方式传递给父组件;
    • 可以通过this.$refs.ref.$datamounted生命周期内获取子组件的内部状态;

      • 目前不知道如何监听其变化;
      • 因为计算属性computed和侦听属性watch只能监听 响应式依赖 的变化,而$refs非响应式
  • 一个组件的 data 选项必须是一个函数


    data选项有两种定义方式: 一、对象形式:

    data:{

    //引用该组件的地方,共用一个状态的引用,以至于,只要有一处修改了$data中的某一属性值,其它引用该组件的地方也跟随着改变该属性值(其实,不是跟随,本来就是同一个指向)。

    }


    二、函数形式:

    data(){

    return {

    //引用该组件的地方,每一个组件都会获得独立的引用,互不干扰。

    }

    }


computed属性 VS methods属性 VS filter

区别 method computed filter
类型 函数 数据变量 函数
用途 作事件处理函数 作数据 作管道符
作用范围 组建内 组建内 组建内(局部注册)、全局(全局注册)
参数 可以带参 不带参(非函) 带参
返回值 不要求 必须有 必须有
触发 交互时触发 在它的相关依赖发生改变时才会重新求值 传入的数据变化时执行

注意:


组件构建的主要区别在于模板的生成方式

模板定义方式

template选项

字符串模板

  • 以HTML标签结构组成的字符串;
  • 示例:

{
template: '<h1 v-if="level === 1">简单示例</h1>',
props: {
level: {
type: Number,
required: true
}
}
}

id选择器指定的模板

  • id标识的一段script标签包裹的HTML片段;
  • 示例:

<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
简单示例
</h1>
</script>
{
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
}

render

  • 发挥JavaScript最大的编程能力,该函数接收一个createElement方法作为第一个参数用来创建VNode
  • createElement接收三个参数:组件根节点类型、组件配置对象、子节点(官方关于组件配置对象的说明);
  • 示例:

{
render: function (createElement) {
return createElement(
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
},
props: {
level: {
type: Number,
required: true
}
}
}

单文件组件

单文件组件将模板、逻辑、样式在结构上分离,保存在同一个文件中。


<template>
<div>
...
</div>
</template>
<script>
...
export default{
...
}
...
</script>
<style>
...
</style>

方案选择

template 单文件 render
一行的简单结构 常规的选择 前边两种方案解决不了时候的选择(灵活性高)

注意:

  • 不论选择哪一种方案,定义模板时,一定要有一个非template标签元素作根DOM,有且仅有一个。

组件注册方式

局部注册

以上几种方案定义的组件本质上都是一个对象,获取该对象(假设变量名为TabBar),要求只在另一个组件(假设变量名为App)内使用:

App组件的配置对象:


{
components:{
'tab-bar': TabBar,
}
}

这样就是局部注册,该组件TabBar只能在App模板中使用<tab-bar></tab-bar>,其它组件对TabBar不可见。

全局注册

以上几种方案定义的组件本质上都是一个对象,获取该对象(假设变量名为TabBar),要求项目内任何组件可使用:

一般在项目的入口文件(如:脚手架搭建项目的main.js)中:


Vue.component('tab-bar',TabBar);

这样就是全局注册,该组件TabBar能在整个项目内使用<tab-bar></tab-bar>,所有组件对TabBar可见。

生命周期钩子

以下用自己的语言将生命周期钩子表述一下,如果有不对的地方,请校正:

beforeCreate

在这个时候,生命周期函数已经准备好。

  • 组件实例已经构建,但本组件实例的数据、方法还没有注入;
  • 可以在各个生命周期内通过组件实例this调用根实例上注入的$router$store等对象。
  • 可以在本生命周期内进行数据初始化;

created

在这个时候,当前组件实例this上的属性($dataprops$methods...)已经注入绑定,可以调用本实例上的成员属性;

beforeMount

在进入本生命周期之前,会进行以下判断:

  • 是否有el选项(指定挂载目标):

    • el选项的是根实例;
    • 没有el选项的是非根实例(默认挂载元素为组件调用的位置);
  • 是否有template选项:

    • template选项的是内联模板;
    • 没有template选项的是单文件组件;
    • 个人觉得,还有render选项的判断;

最终这些模板都会转换为render函数进行渲染!!!

  • 这个生命周期在解析模板,不知道有什么实际用途。

mounted

在本生命周期之前,已经将模板渲染为真实DOM,其中vm.$el组件实例的根DOM元素

  • 本生命周期是初始化第三方插件的场所;
  • 必要时候,可以在本生命周期内对DOM进行操作;
  • 本生命周期是获取this.$refs.ref的场所;

来源:https://segmentfault.com/a/1190000015882730

Vue组件定义的更多相关文章

  1. vue组件定义方式,vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  2. vue组件定义全局方法

    1.在vue实例的data中定义一个对象 2.可以在其他组件定义方法 3.触发方法

  3. vue组件定义方式

    一.全局组件 <div id="box"> {{msg}} <my-aaa></my-aaa> </div> var Home = ...

  4. [js高手之路] vue系列教程 - 组件定义与使用上部(7)

    组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...

  5. vue 组件的定义

    1.什么是组件? 组件的出现,就是为了拆分vue实例的代码量的,能够让我们以不同的组件来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可. 2.组件化和模块化的不同? 模块化: ...

  6. vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  7. Vue学习笔记【23】——Vue组件(组件的定义)

    定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...

  8. 怎么定义一个自己的vue组件

    1.在src文件夹中创建一个hello文件夹,然后创建hello.js和hello.vue 2.hello.vue代码如下 <template> <button>这是hello ...

  9. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

随机推荐

  1. Rails3:使用bundler管理gems

    Rails3:使用bundler管理gems bundler 是一套为了 Rails3 所打造的全新 Gem dependencies 管理工具:一套基于 Rubygems 的更高阶套件管理工具,适合 ...

  2. telnet ip 端口

    telnet ip 端口 1.关闭防火墙, 2.配置防火墙,出入端规则

  3. webpack配置反向代理

    devServer: { contentBase: path.resolve(__dirname, "../dev"), compress: true, port: ,//本身的端 ...

  4. Linux内核设计与实现 总结笔记(第十二章)内存管理

    内核里的内存分配不像其他地方分配内存那么容易,内核的内存分配不能简单便捷的使用,分配机制也不能太复杂. 一.页 内核把页作为内存管理的基本单位,尽管处理器最小寻址坑是是字或者字节.但是内存管理单元MM ...

  5. 麦子lavarel---10、一些第三方应用注意

    麦子lavarel---10.一些第三方应用注意 一.总结 一句话总结: 其实把重要的几个功能弄一个就好了,邮箱验证,手机号验证,支付验证,都是调用第三方接口,也很简单 1.关于页面和服务端校验的看法 ...

  6. this._super()

    https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/ https://api.jqueryui.com/jquery ...

  7. Linux内核调试方法总结之Call Trace

    内核态call trace 内核态有三种出错情况,分别是bug, oops和panic. bug属于轻微错误,比如在spin_lock期间调用了sleep,导致潜在的死锁问题,等等. oops代表某一 ...

  8. p2p传输协议

    老司机是如何飙车的——P2P传输协议 转载来自2017-03-27 15:23 点波蓝字关注变智者 秋明山上人行稀,常有车手较高低,如今车道依旧在,不见当年老司机.其实老司机们从未离去,只不过好的车手 ...

  9. 读取资源中的GIF文件相应像素宽高度

    代码参考了如下网页的实现: https://www.cnblogs.com/zy791976083/p/9921069.html 整理成一个函数: BOOL GetResGifSize(long nR ...

  10. fastboot烧录镜像--VTS&GSI镜像替换

    fastboot简介 Android提供的原生工具,主要用于替换镜像. 源码在SDK工程中,/system/core/fastboot目录下 安卓分区&镜像 见链接分区和映像--google官 ...