【Vue】详解组件的基础与高级用法

2018-09-15 admin

Vue.js 最核心的功能就是组件(Component),从组件的构建、注册到组件间通信,Vue 2.x 提供了更多方式,让我们更灵活地使用组件来实现不同需求。

构建组件

组件基础

一个组件由 template、data、computed、methods等选项组成。需要注意:

  • template 的 DOM 结构必须有根元素
  • data 必须是函数,数据通过 return 返回出去
// 示例:定义一个组件 MyComponent
var MyComponent = {{
  data: function () {
    return {
      // 数据
    }
  },
  template: '<div>组件内容</div>'
}

由于 HTML 特性不区分大小写, 在使用kebab-case(小写短横线分隔命名) 定义组件时,引用也需要使用这个格式如 <my-component>来使用;在使用PascalCase(驼峰式命名) 定义组件时<my-component><MyComponent>这两种格式都可以引用。

.vue 单文件组件

如果项目中使用打包编译工具 webpack,那引入 vue-loader 就可以使用 .vue后缀文件构建组件。 一个.vue单文件组件 (SFC) 示例:

// MyComponent.vue 文件
<template>
    <div>组件内容</div>
</template>

<script>
  export default {
      data () {
        return {
          // 数据
        }
      }
  }
</script>

<style scoped>
    div{
        color: red
    }
</style>

.vue文件使组件结构变得清晰,使用.vue还需要安装 vue-style-loader 等加载器并配置 webpack.config.js 来支持对 .vue 文件及 ES6 语法的解析。

进一步学习可参考文章:详解 SFC 与 vue-loader

注册组件

手动注册

组件定义完后,还需要注册才可以使用,注册分为全局和局部注册:

// 全局注册,任何 Vue 实例都可引用
Vue.component('my-component', MyComponent)

// 局部注册,在注册实例的作用域下有效
var MyComponent = { /* ... */ }
new Vue({
    components: {
        'my-component': MyComponent
    }
})

// 局部注册,使用模块系统,组件定义在统一文件夹中
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent // ES6 语法,相当于 MyComponent: MyComponent
  }
}

注意全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。

自动注册

对于通用模块使用枚举的注册方式代码会非常不方便,推荐使用自动化的全局注册。如果项目使用 webpack,就可以使用其中的require.context一次性引入组件文件夹下所有的组件:

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst' // 使用 lodash 进行字符串处理
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  './components',   // 其组件目录的相对路径
  false,   // 是否查询其子目录
  /Base[A-Z]\w+\.(vue|js)$/   // 匹配基础组件文件名的正则表达式
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 剥去文件名开头的 `./` 和结尾的扩展名
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    componentConfig.default || componentConfig
  )
})

组件通信

父单向子的 props

Vue 2.x 以后父组件用props向子组件传递数据,这种传递是单向/正向的,反之不能。这种设计是为了避免子组件无意间修改父组件的状态。

子组件需要选项props声明从父组件接收的数据,props可以是字符串数组对象,一个 .vue 单文件组件示例如下

// ChildComponent.vue
<template>
    <div>
      <b>子组件:</b>{{message}}
    </div>
</template>

<script>
  export default {
    name: "ChildComponent",
    props: ['message']
  }
</script>

父组件可直接传单个数据值,也可以可以使用指令v-bind动态绑定数据:

// parentComponent.vue
<template>
    <div>
      <h1>父组件</h1>
      <ChildComponent message="父组件向子组件传递的非动态值"></ChildComponent>
      <input type="text" v-model="parentMassage"/>
      <ChildComponent :message="parentMassage"></ChildComponent>
    </div>
</template>

<script>
  import ChildComponent from '@/components/ChildComponent'
  export default {
    components: {
      ChildComponent
    },
    data () {
      return {
        parentMassage: ''
      }
    }
  }
</script>

配置路由后运行效果如下: clipboard.png

子向父的 $emit

当子组件向父组件传递数据时,就要用到自定义事件。子组件中使用 $emit()触发自定义事件,父组件使用$on()监听,类似观察者模式。

子组件$emit()使用示例如下:

// ChildComponent.vue
<template>
  <div>
    <b>子组件:</b><button @click="handleIncrease">传递数值给父组件</button>
  </div>
</template>

<script>
  export default {
    name: "ChildComponent",
    methods: {
      handleIncrease () {
        this.$emit('increase',5)
      }
    }
  }
</script>

父组件监听自定义事件 increase,并做出响应的示例:

// parentComponent.vue
<template>
    <div>
      <h1>父组件</h1>
      <p>数值:{{total}}</p>
      <ChildComponent @increase="getTotal"></ChildComponent>
    </div>
</template>

<script>
  import ChildComponent from '@/components/ChildComponent'
  export default {
    components: {
      ChildComponent
    },
    data () {
      return {
        total: 0
      }
    },
    methods: {
      getTotal (count) {
        this.total = count
      }
    }
  }
</script>

访问 parentComponent.vue 页面,点击按钮后子组件将数值传递给父组件: clipboard.png

子孙的链与索引

组件的关系有很多时跨级的,这些组件的调用形成多个父链与子链。父组件可以通过this.$children访问它所有的子组件,可无限递归向下访问至最内层的组件,同理子组件可以通过this.$parent访问父组件,可无限递归向上访问直到根实例。

以下是子组件通过父链传值的部分示例代码:

// parentComponent.vue
<template>
    <div>
      <p>{{message}}</p>
      <ChildComponent></ChildComponent>
    </div>
</template>

// ChildComponent.vue
<template>
  <div>
    <b>子组件:</b><button @click="handleChange">通过父链直接修改数据</button>
  </div>
</template>

<script>
  export default {
    name: "ChildComponent",
    methods: {
      handleChange () {
        this.$parent.message = '来自 ChildComponent 的内容'
      }
    }
  }
</script>

显然点击父组件页面的按钮后会收到子组件传过来的 message。

在业务中应尽量避免使用父链或子链,因为这种数据依赖会使父子组件紧耦合,一个组件可能被其他组件任意修改显然是不好的,所以组件通信常用props$emit

递归组件

组件可以在自己的 template 模板中调用自己,需要设置 name 选择。

// 递归组件 ComponentRecursion.vue
<template>
  <div>
    <p>递归组件</p>
    <ComponentRecursion :count="count + 1" v-if="count < 3"></ComponentRecursion>
  </div>
</template>

<script>
  export default {
    name: "ComponentRecursion",
    props: {
      count: {
        type: Number,
        default: 1
      }
    }
  }
</script>

如果递归组件没有 count 等限制数量,就会抛出错误(Uncaught RangeError: Maximum call stack size exceeded)。

父页面使用该递归组件,在 Chrome 中的 Vue Devtools 可以看到组件递归了三次: clipboard.png

递归组件可以开发未知层级关系的独立组件,如级联选择器和树形控件等。

动态组件

如果将一个 Vue 组件命名为 Component 会报错(Do not use built-in or reserved HTML elements as component id: Component),因为 Vue 提供了特殊的元素 <component>来动态挂载不同的组件,并使用 is 特性来选择要挂载的组件。

以下是使用<component>动态挂载不同组件的示例:

// parentComponent.vue
<template>
 <div>
    <h1>父组件</h1>
    <component :is="currentView"></component>
    <button @click = "changeToViewB">切换到B视图</button>
 </div>
</template>

<script>
  import ComponentA from '@/components/ComponentA'
  import ComponentB from '@/components/ComponentB'
  export default {
   components: {
      ComponentA,
      ComponentB
    },
   data() {
      return {
        currentView: ComponentA // 默认显示组件 A
      }
    },
    methods: {
      changeToViewB () {
        this.currentView = ComponentB // 切换到组件 B
      }
    }
  }
</script>

改变 this.currentView的值就可以自由切换 AB 组件: clipboard.png

与之类似的是vue-router的实现原理,前端路由到不同的韵实际上就是加载不同的组件。


要继续加油呢,少年!

原文链接:https://segmentfault.com/a/1190000016409329

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-40335.html

文章标题:【Vue】详解组件的基础与高级用法

相关文章
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
详解HTML5游戏玩家流失原因
对任何类型的电子游戏来说,玩家流失都是一个无法回避的问题。玩家为什么离开游戏?近日,HTML5游戏设定师纳森·洛维托(Nathan Lovato)在游戏开发者网站Gamasutra撰写文章,解读了玩家离开游戏的16个理由。 HTML5游戏 ...
2015-11-12
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
回到顶部