中国空间站建造历程,网站开发的英文参考文献,建筑公司简介范文大全,百度网站风格一、前言 之前的博客聊过 vue2.0和react的技术选型#xff1b;聊过vue的axios封装和vuex使用。今天简单聊聊 vue 组件的封装。 vue 的ui框架现在是很多的#xff0c;但是鉴于移动设备的复杂性#xff0c;兼容性问题突出。像 Mint-UI 等说实话已经很不错了#xff0c;但是坑…
一、前言 之前的博客聊过 vue2.0和react的技术选型聊过vue的axios封装和vuex使用。今天简单聊聊 vue 组件的封装。 vue 的ui框架现在是很多的但是鉴于移动设备的复杂性兼容性问题突出。像 Mint-UI 等说实话已经很不错了但是坑也是不少而且项目中很多功能仅凭这些也实现不了这需要我们去封装自己的可复用组件。 二、封装组件的步骤 1. 建立组件的模板先把架子搭起来写写样式考虑好组件的基本逻辑。 os思考1小时码码10分钟程序猿的准则。 2. 准备好组件的数据输入。即分析好逻辑定好 props 里面的数据、类型。(后面详解) 3. 准备好组件的数据输出。即根据组件逻辑做好要暴露出来的方法。后面详解 4. 封装完毕了直接调用即可。 接下来以一个很简单的例子具体说明一下 现在先看一下demo的效果图 三、代码详解 1. 先说一下 props 我们在父组件中需要将子组件需要的数据导入用法如下
search selectFuncselectFunc :searchListsearchList :selectValueselectValue/search :searchListsearchList 就是我们的数据这个可以写多个。这里我传输了2个参数过去主要是做数据修改的说明。大家可以先忽略。 在子组件中我们的接收和使用方法如下 props: {searchList: Array,selectValue: Object},
mounted() {this.data this.searchList}, 我们在 props 中接收数据注意props对象里面 键值 是对改数据的 数据类型 的规定。做了规范使用者就只能传输指定类型的数据否则报警告 而props对象中的数据我们可以直接在当前组件中使用 this.searchList可以直接使用。这里要强调一下props传过来的数据只做展示不得修改想修改再新写一个data中的变量承接做数据的再处理。至于原因同上可以看一下js的原型。至于原理嘛不懂的可以取脑补一下 js的原型 。 os这些基础在这就不做详述了。 以上就是props传递过来的数据的使用了。 2. emit的使用(如何暴露组件方法) 我们已经会使用 父组件向子组件传数据了那如子组件如何来修改父组件的数据呢 这里提供 2 种实现方法但是 第一种不推荐强烈不推荐 方式一 selectValue: {data: 1},。。。。。。。。。。。。。。。this.selectValue.data 我被修改了即父组件将 对象 数据传递给子组件子组件直接修改props过来的对象的值 可以实现感觉是一个比较快捷的方式。但是不推荐这种方式写多了容易出错特别是多层组件嵌套的时候。这种修改对代码的迭代和错误的捕捉都不友好所以建议大家别这样写。 他的实现原理简单提一下 这个对象、数组啦是引用数据类型说白了就是存储单元的信息是指针真正数据在别的地方通过指针查询的数据所以这样写对浏览器来说仅仅是传递了一个指针数据还是同一份数据。所以你能修改。 方式二 正儿八经的通过 $emit 方法去掉父组件的方法在父组件中修改data的数据。根正苗红的方法规范写法 // 子组件
this.$emit(selectFunc, value)
// 父组件
search selectFuncselectFunc :searchListsearchList :selectValueselectValue/searchselectFunc(value) {this.selectValue2 valueconsole.log(this.selectValue)console.log(this.selectValue2)} 将父组件的方法注入子组件 selectFuncselectFunc 然后在子组件中通过 $emit 调用他并传递参数。达到修改的目的。 四、 demo代码
父组件 templatesection classf-mainPage!--selectFunc 选择完成的回调 searchList 下拉列表的数据--search selectFuncselectFunc :searchListsearchList :selectValueselectValue/search/section
/templatescript typetext/ecmascript-6import Search from ../vuePlugin/searchexport default {data() {return {searchList: [草船借箭, 大富翁, 测试数据],// 直接通过props传递对象 修改挺便捷的,但是不规范selectValue: {data: 1},// 通过emit修改规范写法selectValue2: }},mounted() {},methods: {pageGo(path) {this.$router.push(/ path)},selectFunc(value) {this.selectValue2 valueconsole.log(this.selectValue)console.log(this.selectValue2)}},components: {Search}}
/scriptstyle langscss scoped
.f-mainPage{width: 100%;.g-banner{width: 100%;background-image: url(../../../static/main_bg.png);background-repeat: no-repeat;background-size: 100% 100%;position: relative;overflow: hidden;color: white;text-align: center;p:nth-child(1) {margin: 10px auto 0px auto;font-size: 1.3rem;}.f-banscri {margin: 15px auto 8px auto;font-size: 0.95rem;}.f-moneyMax{margin: 5px auto 0px auto;font-size: 2.4rem;}.f-returnCash{width: 120px;height: 35px;text-align: center;line-height: 35px;background-color: white;color: #169BD5;display: inline-block;border-radius: 5px;font-size: 1rem;margin-top: 35px;position: relative;.f-mmmbd{position: absolute;width: 100%;height: 100%;background-color: transparent;top: 0;left: 0;}}}.g-cashInfor{width: 100%;text-align: center;display: flex;justify-content: space-between;div{width: 50%;height: 60px;line-height: 60px;box-sizing: border-box;}div:nth-child(1){border-bottom: 1px solid #878787;border-right: 1px solid #878787;}div:nth-child(2){border-bottom: 1px solid #878787;}
}.g-operate{width: 100%;height: auto;overflow: hidden;ul{list-style: none;padding: 0;margin: 0;font-size: 1.05rem;li{height: 60px;line-height: 60px;padding-left: 25px;position: relative;span{width: 20px;height: 20px;position: absolute;top: 20px;right: 20px; background-image: url(../../../static/go.png);background-repeat: no-repeat;background-size: 100% 100%;}}}.f-goodNews{width: 340px;height: 144.5px;margin: 20px auto 30px auto;text-align: center;background-image: url(../../../static/banner.png);background-repeat: no-repeat;background-size: 100% 100%;}}
}
/style 子组件 templatediv classsearchZJdiv classf-searchdiv classf-searchIn v-bind:class{searchInFous: this.fousFlag}{{this.searchValue}}span v-bind:class{searchActive: this.searchFlag} v-on:clicksearchDown/span/divdiv classf-searchXl v-ifthis.dataHas v-bind:style{height:this.searchFous, border:this.searchBorder}div v-foritem in searchList v-on:clickchoseValue(item){{item}}/div/divdiv classf-searchXl v-else div暂无数据/div/div/div/div
/templatescript typetext/ecmascript-6export default {data() {return {data: [],dataHas: true,searchFlag: false,searchFous: 0,fousFlag: false,searchValue: ,searchBorder: none}},props: {searchList: Array,selectValue: Object},mounted() {this.data this.searchList},methods: {searchDown() {this.searchFlag false ? this.searchFlag true : this.searchFlag falsethis.searchFous 0 ? this.searchFous auto : this.searchFous 0this.searchBorder none ? this.searchBorder 1px solid #D9D9D9 : this.searchBorder nonethis.fousFlag false ? this.fousFlag true : this.fousFlag false},choseValue(value) {this.searchValue valuethis.searchDown()this.selectValue.data 我被修改了this.$emit(selectFunc, value)}}}
/scriptstyle scoped langstylus relstylesheet/stylus.f-search{width: 250px;height: auto;position: relative;margin-left: 20px;box-sizing: border-box;}.f-searchIn{width: 250px;height: 35px;line-height: 35px;font-size: 0.95rem;border-radius: 5px;overflow: hidden;position: relative;background-color: white;box-shadow: none;box-sizing: border-box;color: #000000;padding-left: 10px;border: 1px solid #A3A3A3;}.searchInFous{border: 1px solid #57C4F6;box-shadow: 0px 0px 5px #57C4F6;}.f-searchIn span{display: block;width: 28px;height: 28px;background-image: url(../../../static/upDown.png);background-size: 100% 100%;background-repeat: no-repeat;background-position: 0px -13px;position: absolute;top: 10px;right: 5px;}.f-searchIn .searchActive{background-position: 0px 12px;top: -2px;}.f-search .f-searchXl{position: absolute;width: 100%;height: auto;max-height: 220px;top: 41px;left: -1px;border-radius: 5px;/*border: 1px solid #D9D9D9;*/background-color: white;overflow-x: hidden;overflow-y: scroll;}.f-search .f-searchXl div{height: 35px;line-height: 38px;color: #000000;padding-left: 25px;font-size: 0.92rem;}.f-search .f-searchXl div:hover{background-color: #D5F1FD;}
/style 五、 总结 这里主要是总结一下vue组件封装的思路帮大家梳理一下。很简单和jQuery插件、react组件一样所有组件都是一个套路就是 函数思想。 组件就是台做烤肠的机器我放进去猪肉再按一下各种开关然后你给我烤肠。 1. 定义好 你需要使用者传入的数据 2. 定义好 你提供给使用者的方法 3. 写好组件的内部逻辑 这就OK了一个完美的可复用的组件就完成了。 os 在此吐槽一下那些自认为是优秀的组件其实别人拿着是没法用的。 o(╥﹏╥)o os 愿大家工作过程中能规范编程习惯一起为前端代码大社区做贡献。 注 os: 2018/06/06 鉴于一些朋友的评论我在这再做一些解答哈这个言论往深了去不保证准确性我尽量吧。有问题的地方还是希望大家及时指出。 1. 父子组件通信的方式远不止我说的那两种。但是通过 $emit 的方式是根正苗红的不带任何差错的是封装优秀组件最好的方式() 1 通过ref 通信 父组件设置ref通过$refs对象来获取子组件的数据 search refrefTest3 /search
.......
console.log(this.$refs.refTest3)
console.log(this.$refs.refTest3.selectValue.data) 其实很简单。ref 就是直接获取了你的dom节点如果是div一类的基本dom和js的document.getElementsByTagName()效果一样的而且这样节省开销。你可以在父组件中直接 this.$refs.refTest3.selectValue.data。直接获取子组件data中的数据或者别的数据都可以获取。但是这个不是我们封装组件会用的东西因为这个用在父组件。组件的思想是 独立的。所以大家平时用用就好了如果要封装可复用的组件这个还是不实用的。 os可能他有特殊用法是我不清楚的如果有请大家分享 2通过 vuex 通信 vuex 大家都知道变量统一管理(方便的很)╮(╯▽╰)╭ 但是用这个来封装组件的完全就是抬杠了。vuex、redux等等这些都是针对组件多层传输数据不便而做的状态统一管理说白了是针对大家都要用的数据才会放到vuex中而组件思想是封装一个独立的、可复用的功能模块。这根本就是2个理念。希望大家不要被误导。 3.aync 父子组件数据双向绑定 说实话这也是来抬杠的。说白了双向绑定不还是 通过 $emit 监听数据更新事件来调用父组件的方法吗 这里简单说一下这个数据双向绑定的还是很常用的方法。不啰嗦看代码
search selectFuncselectFunc :syncTest.syncsyncTest/search
.........
this.$emit(update:syncTest, value) 其实很简单。在父组件向子组件props数据的时候加一个 .sync 修饰符然后在子组件显示的调用 emit 来修改他。 说白了就是添加这样的一个事件绑定 update:fooval bar val 上述的方法就是 父子组件数据双向绑定。子组件实时修改 props 的方法。 欢迎大家提出别的问题和建议
