vue2.0 自定义组件的方法（vue组件的封装）

大佬教程收集整理的这篇文章主要介绍了vue2.0 自定义组件的方法（vue组件的封装），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

一、前言

之前的博客聊过 vue2.0和react的技术选型；聊过vue的axios封装和vuex使用。今天简单聊聊 vue 组件的封装。

vue 的ui框架现在是很多的，但是鉴于移动设备的复杂性，兼容性问题突出。像 Mint-UI 等说实话很不错了，但是坑也是不少，而且很多功能也是仅凭这些实现不了，这需要我们去封装自己的可复用组件

二、封装组件的步骤

1. 建立组件的模板，先把架子搭起来，写写样式，考虑你的组件的基本逻辑。

os：思考1小时，码码10分钟，程序猿的准则。

2. 准备组件的好数据输入。即分析好逻辑，定好 props 里面的数据、类型。(后面详解)

3.准备组件的好数据输出。即根据组件逻辑，做好要暴露出来的方法。（后面详解）

4.封装完毕了，直接调用即可。

os： 代码可以不看，结论在文章最后

接下来以一个很简单的例子具体说明一下

现在先看一下demo的效果图

三、 demo代码

父组件：

<script type="text/ecmascript-6">
import Search from '../vuePlugin/search'
export default {
data() {
return {
searchList: ['草船借箭','大富翁','测试数据'],// 直接通过props传递对象 修改，挺便捷的,但是不规范
SELEctValue: {
data: '1'
},// 通过emit修改，规范写法
SELEctValue2: ''
}
},mounted() {},methods: {
pageGo(path) {
this.$router.push('/' + path)
},SELEctFunc(value) {
this.SELEctValue2 = value
console.log(this.SELEctvalue)
console.log(this.SELEctValue2)
}
},components: {
Search
}
}

大佬总结

以上是大佬教程为你收集整理的vue2.0 自定义组件的方法（vue组件的封装）全部内容，希望文章能够帮你解决vue2.0 自定义组件的方法（vue组件的封装）所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。