每一个合格程序员都知道代码复用很重要，而在vue常使用的代码复用方式有3种，让我们来一一解锁吧！
一、组件
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
在实际使用过程中，我们使用单文件组件更多，以组件的形式实现代码复用多用于HTML元素（显示内容）。
组件内容：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
font-weight: normal;
}
</style>
引用组件：
<template>
<div id="app">
<hello></hello> // 使用组件
</div>
</template>
<script>
import Hello from './components/Hello' // 引入组件
export default {
name: 'app',
components: {
Hello // 引用组件
},
data () {
return {
}
}
}
</script>
<style>
</style>
二、自定义指令
在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。
官网的说法比较抽象难理解，在实践中我一般在一下两种情况中使用到自定义指令：
- 参数简单，但是参数经常需要修改的组件，并且组件与其他元素有简单的依赖关系；例如加载效果，数据加载时，显示加载页面，加载完成后，隐藏加载页，显示数据，如果使用组件方式复用，我需要在HTML中添加组件，还需要在对象中引用，使用自定义指令只需要在相关元素上设置指令就可以了。
- 对绑定元素的子元素或各种行为进行监听或操作；例如无限滚动效果
定义指令：
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 也可以注册局部指令
directives: {
focus: {
// 指令的定义---
}
}
使用指令：
<input v-focus>
三、引入对象或方法
第三种方法很多人肯定认为是插件，其实对也不对，vue的插件是为vue引入全局功能，就是说插件是将对象引入vue中的一种方法，局部使用我可以在使用时引用（关于在vue中引用对象或方法可以看这篇文章：Vue框架引入JS库的正确姿势）。引入对象或方法在没有使用vue我们就一直使用了，使用组件方式在复用HTML元素时很好用，但是很多时候我们复用HTML元素不多，或者只是复用js代码，使用组件就不是很方便，那么使用传统的引用js的方法就很合适了。
网友评论