vue 父组件调不到子组件的方法是怎么回事啊?

我子组件有这么一个方法

图片说明

父组件调用

图片说明

第一个打印出来了

图片说明

第二个报错

图片说明

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue 完全独立的两个组件可以做到数据共享,数据监听吗?
vue 完全独立的两个组件可以做到数据共享,数据监听吗? 例:a组件改变store 中的数据,b组件computed:{li(){return store 中的数据}}, watch:{li(newV,old):{console.log(newV)}}监听, a,b组件不在同一个父组件中,是完全独立的两个组件,没有任何关系, 为什么监听不到数据的变化呢?求解!!!!!!
component 动态组件为子组件, props获取不到数据
props 获取的值为undefined 需求: 1、需要将 父组件获取到的数据传递到对应组件的data里 ,通过:list 传递给小组件到的 这是引入component 的 父组件 ``` <template> <!-- <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view> --> <eptaskpage :lists="lists"></eptaskpage> </template> <script> import eptaskpage from "@/pages/task/task-page/task-page.vue" export default { components: { eptaskpage, }, data() { return { lists: { banner: [], grid: [], } } }, onLoad() { console.log('开始加载数据') // this.getBanner(), this.getGrid() // this.getLcard2() // this.getAdList(); }, methods: { async getBanner() { let _self = this; let param = { type: '0' }; _self.banner = await _self.$apis.getBanner(param); }, // getGrid() { // var _self = this; // console.log(_self,9585) // }, getGrid() { var _self = this; uni.request({ url: 'http://122.112.191.190:8080/API/more_video', //请求接口 data: { 'video_type': '', 'price_order': '', 'hot_order': '', 'price': 'F', 'discount': '', 'general_order': '' }, success: (res) => { _self.lists.grid = res.data.data console.log(res, "111111111111") this.flag = true } }); }, ``` 这是component 子组件,用import 引入的小组件来动态生成的页面,封装成为组件 ``` <template> <joy-page class="ep-taskpage"> <div v-for="(item,i) in page_template.items" :key="i" v-if="lists"> <component :is="item.component.tag" :list="item.component.data"></component> </div> </joy-page> </template> <script> import { mapState, mapGetters } from 'vuex' import epSearch from "@/components/ep-search/ep-search.vue" import epSwiper from "@/components/ep-swiper/ep-swiper.vue" import listTitM from "@/components/ep-tit/ep-tit-m.vue" import listTit from "@/components/ep-tit/ep-tit.vue" import epGrid from "@/components/ep-grid/ep-grid.vue" import epCard from "@/components/ep-card/ep-card.vue" import epCcard from "@/components/ep-ccard/ep-ccard.vue" import epCcard2 from "@/components/ep-ccard/ep-ccard2.vue" import epBox2 from "@/components/ep-box/ep-box-2.vue" import epLoadMore from '@/components/ep-b-tab/uni-load-more.vue' import epListCp from "@/components/ep-list-c/ep-list-cp.vue" export default { name: 'eptaskpage', components: { epSearch, epSwiper, listTit, epGrid, epCard, epCcard, epCcard2, epBox2, listTitM, epLoadMore, epListCp }, props: { lists: { type: [Array, Object, Number], default () { return } } }, data() { return { page_template: { //页面的模板,整页 template: "", //可以指定前端对应的templete,无则默认 items: [ //页面上的组件数组,按顺序显示 { component: { tag: "ep-search", data: ['grid'] } }, { component: { tag: "ep-swiper", data: ['banner'] } }, { component: { tag: "ep-grid", data: ['grid'] } }, { component: { tag: "list-tit", data: ['listtit'] } }, { component: { tag: "ep-box-2", data: ['adList'] } }, { component: { tag: "list-tit", data: ['listtit'] } }, { component: { tag: "ep-ccard", data: ['lcard'], } }, { component: { tag: "list-tit", data: ['listtit'] } }, { component: { tag: "ep-ccard", data: ['lcard2'], } }, { component: { tag: "list-tit-m", data: ['listTitM'] } }, { component: { tag: "ep-ccard2", data: ['lcard3'], } }, ] }, } }, ```
vue elemen form 循环加组件抽离形式怎么才能准确的传值???加急!!!!!
父组件 ``` <el-form :model="AddData" ref="AddData" label-width="220px" class="demo-ruleForm" key="AddData" :rules="Addrules"> <span v-for="(item,index) in AddData.debtorVOList" :key="index+'c'"> <h4 class="Title">出质人信息 {{+index+1}} <el-button type="text" @click="addDomain('debtor')" v-if="index+1==1" class="green">增加</el-button> <el-button type="text" @click="removeDomain(item,'debtor')" v-if="index+1!=1" class="red">移除</el-button></h4> <FormAddData :FormAddData="item" :index=index :AddQuery="AddQuery" :regionTree=regionTree :Addrules=Addrules></FormAddData> </span> </el-form> ``` 子组件 ``` <el-form-item label="质权人类型" prop="" :rules="Addrules.type"> <el-select v-model="FormAddData.type" prefix-icon="el-icon-search" clearable placeholder="请选择" @change="change_Pledgor(FormAddData)"> <el-option v-for="item in AddQuery.businessPersonTypeList" :key="item.dictionaryValue" :label="item.dictionaryValueDesc" :value="item.dictionaryValue"> </el-option> </el-select> </el-form-item> ``` 子组件的prop 直接写type 的话 那不到值 又不知道怎么写 for循环的我写过 ``` :prop="'debteeVOList.'+ index +'.type'" ``` 这样就好用 组件抽离的找不到该怎么写 求教
vue里的组件之间传值,用query传回来 渲染对应的input
![图片说明](https://img-ask.csdn.net/upload/201910/17/1571304210_755589.jpg) ![图片说明](https://img-ask.csdn.net/upload/201910/17/1571304195_78182.jpg) 这两张图片是组件chooseClass的,问题点击确定以后要把 query: { classId: item.id, className: item.name, lecturerName: item.lecturername, assistantName: item.assistantname }; 这个传入到组件addLargeClass组件里,并且跳转到这个页面,重新渲染input,现在是点击确定不管事,addLargeClass组件里JS部分怎么写?
在使用vue-preview缩略图时src图太大了,怎么调小?
最近在学习vue的一个移动商城项目,但是视频已经是两年前的了,许多地方都搞不明白。在学习使用vue-preview缩略图时,我的src图片和msrc图片差不多大,我不明白这是为什么,还要如何才能让他达到理想的缩略图效果? 代码如下: ``` <template> <div class="photoinfo-container"> <h3>{{ photoinfo.title }}</h3> <p class="subtitle"> <span>发表时间:{{ photoinfo.add_time | dateFormat }}</span> <span>点击:{{ photoinfo.click }}次</span> </p> <hr> <!-- 缩略图区域 --> <div class="thumbs"> <vue-preview :slides="slide1" @close="handleClose" tag="img" height="100px"></vue-preview> </div> <!-- 文字内容区域 --> <div class="content" v-html="photoinfo.content" ></div> <!-- 放置一个现成的 评论子组件 --> <cmt-box :id="id"></cmt-box> </div> </template> <script> // 1. 导入评论子组件 import comment from "../subcomponents/comment.vue"; export default { data() { return { id: this.$route.params.id, // 从路由中获取到的 图片Id photoinfo: {}, // 图片详情 slide1: [], }; }, created() { this.getPhotoInfo(); this.getThumbs(); }, methods: { getPhotoInfo() { // 获取图片的详情 this.$http.get("api/getimageInfo/" + this.id).then(result => { if (result.body.status === 0) { this.photoinfo = result.body.message[0]; } }); }, getThumbs() { // 获取缩略图 this.$http.get("api/getthumimages/" + this.id) .then(result => { if (result.body.status === 0) { // 循环每个图片数据,补全图片的宽和高 result.body.message.forEach(item => { item.w = 600; item.h = 400; item.msrc = item.src; }); // 把完整的数据保存到 slide1 中 this.slide1 = result.body.message; } }) .catch(error => { console.log(error); Toast({ message: "获取缩略图图片失败..." }); }); }, handleClose () { console.log('close event') } }, components: { // 注册 评论子组件 "cmt-box": comment } }; </script> <style lang="scss" scoped> .photoinfo-container { padding: 3px; h3 { color: #26a2ff; font-size: 15px; text-align: center; margin: 15px 0; } .subtitle { display: flex; justify-content: space-between; font-size: 13px; } .content { font-size: 13px; line-height: 30px; } .thumbs{ img{ margin: 10px; box-shadow: 0 0 8px #999; } } } </style> ``` 我的效果图: ![图片说明](https://img-ask.csdn.net/upload/201912/10/1575947687_671886.png) ![图片说明](https://img-ask.csdn.net/upload/201912/10/1575947799_485086.png) 应达到的效果图:![图片说明](https://img-ask.csdn.net/upload/201912/10/1575948099_260601.png)
vue使用swiper组件获得activeIndex后,如何实现实时监听activeIndex,如果发生变化则设置flag属性为false
vue使用swiper组件获得activeIndex后,如何实现实时监听activeIndex,如果发生变化则设置flag属性为false ``` <swiper :options="swiperOption" ref="Myswper"> <swiper-slide v-for="card in itemcard" :key="card.id"> <img>//循环数据展示 </swiper-slide> </swiper> ``` ``` data () { return { // swiper默认配置 swiperOption: { slidesPerView: 'auto', spaceBetween: 30, centeredSlides: true, pagination: '.swiper-pagination', paginationClickable: true, on: { slideChangeTransitionEnd: function () { // console.log(this.activeIndex) // 切换结束时,告诉我现在是第几个slide } } } } } ``` ``` watch: { 实现监听this.$refs.Myswper.swiper.activeIndex发生变化执行赋值动作 } ``` 由于vue不能监听到swiper中的activeIndex,也不能监听到ref的变动,请问如何才能实现想要的效果?
vue项目中遇到的问题,求大神解答,很急 谢谢你们
1,这是我的json数据 ![图片说明](https://img-ask.csdn.net/upload/201904/24/1556073574_752572.png) ![图片说明](https://img-ask.csdn.net/upload/201904/24/1556073584_349636.png) 2、这是我的父组件 ![图片说明](https://img-ask.csdn.net/upload/201904/24/1556073650_261636.png) 3、这是我其中的一个子组件 ![图片说明](https://img-ask.csdn.net/upload/201904/24/1556073760_756274.png) 4、我把子组件里面的数据都放到json里面了,子组件里面没有循环的数据了 这都是本地的 之后我在我的父组件里面写json文件的路径,想让我的子组件直接接收到json文件的数据,页面没有报错 但是数据一直就是不显示。
Vue-router的问题,使用路由嵌套的时候,为何子路由的内容不被渲染到router-view?
![图片说明](https://img-ask.csdn.net/upload/201903/12/1552404412_780066.png)![图片说明](https://img-ask.csdn.net/upload/201903/12/1552404427_831596.png)![图片说明](https://img-ask.csdn.net/upload/201903/12/1552404436_354059.png)![图片说明](https://img-ask.csdn.net/upload/201903/12/1552404443_394701.png)![图片说明](https://img-ask.csdn.net/upload/201903/12/1552404451_51692.png) 上面白色背景的是官方的,黑色的是我的,唯一不同的地方就是官方没有使用name来命名路由。根据这种设计,点击不同名的路由,路径确实被改变了(参考图3和图4),**但是所渲染的内容都是block组件**,这是为何?二级路径,我希望渲染block2的内容。为何会出现这个问题?怎么解决?为了更好的逻辑,设计模式,尽量采用嵌套路由,如果不是嵌套路由,我有办法解决。
Vue点击事件无效:Invalid handler for event "click": got undefined
描述: 定义了单击事件,但是使用Vue组件生成的标签就检测不到单击的方法,并报错:Invalid handler for event "click": got undefined 把标签放到外面可以正常使用,使用Vue组件生成后就报错,而且msg这个也找不到了 请问该如何处理?以下是全部代码 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="container"> <div id="navbar_left"> <pr></pr> </div> </div> <script> Vue.component("pr",{ name:"pr", template:"<p @click='this.toggle'>{{msg}}</p>", data(){ return{ open:true } } }); var app = new Vue({ el:"#navbar_left", data:{ msg:"hello world", }, methods:{ toggle(){ this.open = !this.open } }, }); </script> </body> </html> ```
vue项目,在切换路由时内存没有释放,再次切换回原路由或者是其他页面,为什么内存又被释放了?
先说一下环境:vue:2.5.2 vue-router:3.0.1 element-ui:2.13.0 最开始存在三个页面HelloWorld、foo和bar。 分别说一下这两个页面都有什么: HelloWorld页面,有一个请求(会请求一些数据),将请求回来的数据放到data中,并用element-ui的select组件进行展示,另外就是一个跳转至foo页面的按钮,代码如下: ``` <template> <div class="hello"> <el-button @click="getAccountListPage"> page获取科目列表 </el-button> <el-select v-model="activeAcc" placeholder="请选择"> <el-option v-for="item in accountPageList" :key="item.id" :label="item.codeAndName" :value="item.id"> </el-option> </el-select> <el-button @click="goToFoo"> go Foo </el-button> </div> </template> <script> export default { name: 'HelloWorld', data () { return { activeAcc: '', accountPageList: [] } }, methods: { getAccountListPage() { let xmlhttp, that = this; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { let res = JSON.parse(xmlhttp.response); if(res.result) { that.accountPageList = res.value; } } }; xmlhttp.open("POST","******这里是url*******",true); xmlhttp.setRequestHeader("Content-type","application/json"); xmlhttp.send('{}'); }, goToFoo() { this.$router.push({name: 'foo'}) } }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style> ``` foo页面,很简单,有一个跳转至HelloWorld页面的按钮和一个跳转至bar页面的按钮,代码如下: ``` <template> <div class="foo"> 这是Foo页面 <el-button @click="goToHelloWorld"> go HelloWorld </el-button> <el-button @click="goToBar"> go Bar </el-button> </div> </template> <script> export default { name: 'Foo', data () { return {} }, computed: {}, methods: { goToHelloWorld() { this.$router.push({name: 'HelloWorld'}) }, goToBar() { this.$router.push({name: 'bar'}) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style> ``` bar页面和foo页面一样,有一个跳转至HelloWorld页面的按钮和一个跳转至foo页面的按钮,代码如下: ``` <template> <div class="bar"> 这是Bar页面 <el-button @click="goToHelloWorld"> go HelloWorld </el-button> <el-button @click="goToFoo"> go Foo </el-button> </div> </template> <script> export default { name: 'Bar', data () { return { } }, computed: {}, methods: { goToHelloWorld() { this.$router.push({name: 'HelloWorld'}) }, goToFoo() { this.$router.push({name: 'foo'}) } }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style> ``` 操作步骤: 1.进入HelloWord页面,不做任何操作,利用chrome浏览器开发者工具中的Performance monitor工具,查看内存使用情况 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577778311_366832.png) 2.点击按钮获取数据,查看内存 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577778454_982794.png) 可以看到,js、dom nodes、 js event,都有所增加。 3.跳转至foo页面,查看内存 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577778614_138117.png) 这时候发现内存占用情况并没有明显变化,也就是说跳转foo页面后,helloword页面的内存并未得到释放。这是问题一。 4.这时候跳转至bar页面,查看内存 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577778782_257327.png) 可以看到,刚刚存在的内存占用已经被释放了。这是问题二。 上面的截图都是我手动垃圾回收(collect garbage)后的截图。 对于上面出现的两个问题,还请各位大佬解答一下,万分感谢!!!
vue中this遇到点问题,到底能不能用箭头函数?
问题1:下面这个是由于在红圈那this改变了所以要先把指向组件实例的this保存到that吗 ![图片说明](https://img-ask.csdn.net/upload/201806/28/1530155149_855087.png) 问题2. ![图片说明](https://img-ask.csdn.net/upload/201806/28/1530155228_385552.png) 上面这个箭头函数使this绑定到了定义时的this,也就是vue组件实例上,console.log(this)就是组件实例! 我受上面这个箭头函数的启发在下面这张图中也使用了但是为什么不成功,this不知道绑定到了什么东西上去了 ![图片说明](https://img-ask.csdn.net/upload/201806/28/1530155369_728168.png) console.log(this) ![图片说明](https://img-ask.csdn.net/upload/201806/28/1530155390_169491.png) 为什么不成功,绑定的是个啥? 3.这里只能用es5的方法吗?不能使用箭头函数?
Vue引用ActiveX插件,插件可以正常渲染出来,但无法正常使用,提示“找不到成员”
1.最近做的一个Vue项目需要引入一个ActiveX的组件(呼叫中心的一些功能),在页面通过<object></object >引用,页面可以正常渲染出来,但是无法调用相关功能函数,尝试在Vue的项目里使用iframe,也无法使用; 提示报错:找不到成员 注:单独使用html是正常的 2.相关代码 <template> <input type="button" @click="makecalls" value="挂断"> <div id="emergencyCommandPage"></div> </template> export default { mounted() { this.ActiveInit(); }, methods: { makecalls: function() { console.log(softphonecontrol); softphonecontrol.ClearCall(); }, ActiveInit: function () { let obj = document.createElement('OBJECT') obj.setAttribute('id', 'softphonecontrol') obj.setAttribute('classid', 'clsid:{36C5CC8C-2CBB-4630-B5AA-9EC15F949604}') obj.setAttribute('width', 1500) obj.setAttribute('height', 100) var _obj = document.getElementById("emergencyCommandPage"); _obj.appendChild(obj) }, } }
前端基于框架(类似vue-cli || ionic) 后的css规范问题
1] 对于网上的css规范教程,我觉得都是针对于空白项目的,现在前端工程,大多使用了框架,从框架上开始编程 2] 像使用框架式(例如vue-cli, ionic)这些已经有本身的样式文件,而且其样式文件使用的还是层级(一级一级套下来) 3]网上教程不推荐使用层级控制样式 4]在这样的一个基础上,当我需要修改到其组件, 如何编写css保持规范的,不使用层级就覆盖不了其原有组件样式,使用了又不符合css规范,又不能使用过多的!important 5]该怎么写好在框架中的css
vue引入mqtt无法在平板上显示页面
1、我用vue做的一个项目,把paho-mqtt.js引进index.html页面,然后定义一个组件用来做连接,我在登录页没引入组件的时候去打包放到测试服上,然后用hbuilderx云打包成app,然后去平板上安装是可以看到登录页的,在平板的浏览器看测试服也可以看到;但是我把mqtt连接的组件加进去之后跟上面同样的操作,连第一个登陆页面都不出来了,只出来了index.html定义的一个背景图,我放在手机上安装又可以,不知道什么原因,纠结两天了,请大神帮帮忙~~ 2、还有用js如何接收主板那边用mqtt发过来的16进制的数据?
vue-loader安装后在.vue里的<style></style>里面写样式就报错?
提问:请问下,vue-loader也安装了为何在.vue的style标签了 还是不能写样式呢?webpack4,使用webpack-dev-server命令打包时就报错.应该如何解决? 我已经尝试卸载vue-loader重新安装,删除node-modules重新跑环境,但并没有解决掉.难到是某个加载器的版本的问题吗? main.js ``` import Vue from 'vue'; import app from './App.vue'; import { Header } from 'mint-ui'; Vue.component(Header.name, Header); var vm=new Vue({ el:'#app', render:c=>c(app) }); ``` App.vue ``` <template> <div class="box"> <!--header--> <mt-header fixed title="固定在顶部"></mt-header> <!--body--> <!--foot--> <h1>这是 App 组件</h1> </div> </template> <script> </script> <style lang="sass" scoped> .box{ padding-top:40px; } </style> ``` package.json ``` "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-component": "^0.10.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^0.28.7", "file-loader": "^1.1.5", "html-webpack-plugin": "^2.30.1", "less": "^2.7.3", "less-loader": "^4.0.5", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "vue-loader": "^13.3.0", "vue-template-compiler": "^2.5.2", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.3" }, "dependencies": { "bootstrap": "^3.3.7", "mint-ui": "^2.2.9", "vue": "^2.5.2", "vue-router": "^3.0.1" } } ``` 错误提示: ``` ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped": true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modules/vue-loader/lib/selector .js?type=styles&index=0!./src/App.vue Module build failed: .box{ ^ Invalid CSS after ".box{": expected "}", was "{" in F:\vuetest\day7\src\App.vue (line 19, column 6) @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":" data-v-7ba5bd90","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modul es/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-331 13:3-17:5 14:22-339 @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/main.js
TypeError: form.validateFilds is not a function多表单分别向父组件传值时取不到Form的值
问题描述:我一个页面有多个Modal嵌套Form的组件,现在需要点击各个Modal的OK键取出对应Form里面的值,但是,当仅存在一个Modal时没问题,多个时就报错TypeError: form.validateFilds is not a function,应该是settingFormRef = (form) => { this.form = form; }; const form = this.form; 上面的form没取到值。页面用了多个Form.create()。 对react、ref神马一知半解的菜鸟求解。。。。。。 其中某一个子组件: class ModifyPhone1 extends PureComponent{ constructor(props) { super(props); this.state = { isSend:false, }; } /*发验证码*/ sendCodeOldPhone=()=>{ const {user:{currentUser:{phone}}} = this.props; const {dispatch} = this.props; const payload = {phone}; dispatch({ type:'settings/sendVerificationCode', payload, callback:()=>{ this.setState({ isSend:true, }) } }); }; onhandlePhone=()=>{ this.sendCodeOldPhone(); }; render(){ const {getFieldDecorator} = this.props.form; const {user:{currentUser:{phone}}} = this.props; return( <Modal title={this.props.title} visible={this.props.visible} confirmLoading={this.props.confirmLoading} onOk={this.props.handleOK} okText='确定' cancelText='取消' onCancel={this.props.onCancel} > <Form layout='horizontal' hideRequiredMark='true'> <FormItem> <Row> <Col span={6}><img src={light} className={styles.img}/><span className={styles.numLocation}>1</span><span className={styles.title1}>验证身份</span></Col> <Col span={3}><Icon type="caret-right" style={{color:'#CFD1D2',fontSize:16}} /></Col> <Col span={6}><img src={gray} className={styles.img}/><span className={styles.numLocation}>2</span><span className={styles.title2}>修改手机</span></Col> <Col span={3}><Icon type="caret-right" style={{color:'#CFD1D2',fontSize:16}} /></Col> <Col span={6}><img src={gray} className={styles.img}/><span className={styles.numLocation}>3</span><span className={styles.title2}>完成</span></Col> </Row> </FormItem> <FormItem> <Row> <span>当前手机号:{phone}</span><span>(如果手机号不能用,请联系客服)</span> </Row> </FormItem> <FormItem> <Row gutter={8}> <Col span={18}> {getFieldDecorator('verificationCode1',{ rules:[{required:true,message:'请输入短信验证码'}], })( <Input placeholder='请输入短信验证码'/> )} </Col> <Col span={6}> {/*<Button type='default'>获取验证码</Button>*/} <SendVerifyCode isSend={this.state.isSend} onhandlePhone={this.onhandlePhone} // onSuccessSend={this.onSuccessSend} /> </Col> </Row> </FormItem> </Form> </Modal> ) } }; ModifyPhone1.propTypes = { title: PropTypes.string.isRequired, visible: PropTypes.bool, initValues: PropTypes.object, onCancel: PropTypes.func, handleOK: PropTypes.func, confirmLoading: PropTypes.bool }; const WrappedModifyPhone1 = Form.create()(ModifyPhone1); 父组件: class Security extends PureComponent{ componentDidMount(){ const {dispatch}=this.props; } /*弹出修改手机-验证旧手机Modal*/ showModalModifyPhone1=()=>{ this.setState({ modifyPwd:false, modifyPhone1:true, modifyPhone2:false, modifyPhone3:false, }); }; /*Modal-取消*/ handleCancel=()=>{ this.setState({ modifyPwd:false, modifyPhone1:false, modifyPhone2:false, modifyPhone3:false, }) }; /*关闭Modal*/ cancelModal = () => { this.setState({ modifyPwd: false, modifyPhone1:false, modifyPhone2:false, modifyPhone3:false, }); }; settingFormRef = (form) => { this.form = form; }; /* 验证旧手机 */ **handleModifyPhone1 = () => { const form = this.form; console.log('验证旧手机'); console.log(form); form.validateFilds((err,values)=>{ if(err){ return; } //处理表单values if(values.verificationCode1&&values.verificationCode1.length>0){ const {dispatch} = this.props; const payload = produce(values,draft=>{ let code = draft.verificationCode1; draft.code = code; delete draft.verificationCode1; }); dispatch({ type:'settings/modifyPhoneOne', payload, callback:()=>{ this.setState({ modifyPwd: false, modifyPhone1:false, modifyPhone2:true, modifyPhone3:false, }); } }); } }); };** constructor(props) { super(props); this.state = { // visible: false, modifyPwd:false, modifyPhone1:false, modifyPhone2:false, modifyPhone3:false, initValues: null, // 初始值 modalTitlePwd: '修改密码', modalTitlePhone:'修改手机', }; } render() { return ( <Fragment> ...... {/*修改密码弹框*/} <WrappedModifyPwdForm // ref={this.settingFormRef} title={this.state.modalTitlePwd} visible={this.state.modifyPwd} initValues={this.state.initValues} onCancel={this.cancelModal} handleOK={this.handleModifyPwd} destroyOnClose={true} /> {/*修改手机-验证旧手机*/} <WrappedModifyPhone1 ref={this.settingFormRef} title={this.state.modalTitlePhone} visible={this.state.modifyPhone1} initValues={this.state.initValues} onCancel={this.cancelModal} handleOK={this.handleModifyPhone1} destroyOnClose={true} /> {/*修改手机-验证新手机*/} <WrappedModifyPhone2 // ref={this.settingFormRef} title={this.state.modalTitlePhone} visible={this.state.modifyPhone2} initValues={this.state.initValues} onCancel={this.cancelModal} handleOK={this.handleModifyPhone2} destroyOnClose={true} /> {/*修改手机-修改成功*/} <ModifyStatus // ref={this.settingFormRef} title={this.state.modalTitlePhone} visible={this.state.modifyPhone3} initValues={this.state.initValues} onCancel={this.cancelModal} handleOK={this.handleModifyPhone3} destroyOnClose={true} /> </Fragment> ) } } export default Security;
vuejs 服务端渲染 nuxt.js
有哪位大神用过该技术?目前网上文档很有限 一个.vue文件里引用多个组件视图,每个组件中都有asyndata方法调用接口数据,为什么只有一个组件的该方法会执行到,其余组件中的该方法均不执行???
关于vue 的格式规范问题:理数据
在网上找了很多例子,会单独写一个js进行axios 的方法得集中写axios方法 基本上返回的都是统一处理数据格式的 如果对单个接口来说返回的格式并不能直接应用到组件上,而是需要进行值的转换,你们会怎么写呢?写在单页面内,还是单独写一个js,还是在store文件获取数据进行处理
如下页面 浏览器 上下滑动 会卡顿,求解决
首先该项目之前是混合开发,freemark做的,现在在其基础上改成vue的 我先秒描述一下下面代码的意思: ![图片说明](https://img-ask.csdn.net/upload/201912/25/1577264535_361521.png) 这是记录一个键盘按下的数组,记录一个写作过程,其中: type:0-添加字母/1-删除字母 addLen-每次添加的个数/delLen-每次删除的个数 addVal / delVal-添加、删除的字母 time:时间 将这一个数组拼接成如下图: ![图片说明](https://img-ask.csdn.net/upload/201912/25/1577264987_144229.png) 标蓝色方块是 i 标签 和 title属性 下图为我的代码: ![图片说明](https://img-ask.csdn.net/upload/201912/25/1577265204_418547.png) 问题:页面上下滚动时特别卡(我在想估计是该数组数据太多,全部循环显示出来超过六千个标签,上下滚动可能涉及到重绘和重排),没找到解决办法(该页面文档碎片用不了,懒加载不行,vue插槽、组件传值不行(该项目前端页面都是 .ftl文件),有个解决办法是用js将数组拼接,但是由于freemark的${}和js的字符串模板${}起冲突,所以目前还没有办法,向大神求助!!!)
动态规划入门到熟悉,看不懂来打我啊
持续更新。。。。。。 2.1斐波那契系列问题 2.2矩阵系列问题 2.3跳跃系列问题 3.1 01背包 3.2 完全背包 3.3多重背包 3.4 一些变形选讲 2.1斐波那契系列问题 在数学上,斐波纳契数列以如下被以递归的方法定义:F(0)=0,F(1)=1, F(n)=F(n-1)+F(n-2)(n&gt;=2,n∈N*)根据定义,前十项为1, 1, 2, 3...
终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
点击上面↑「爱开发」关注我们每晚10点,捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类,各个线程都拥有一份线程私...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
Python 植物大战僵尸代码实现(2):植物卡片选择和种植
这篇文章要介绍的是: - 上方植物卡片栏的实现。 - 点击植物卡片,鼠标切换为植物图片。 - 鼠标移动时,判断当前在哪个方格中,并显示半透明的植物作为提示。
防劝退!数据结构和算法难理解?可视化动画带你轻松透彻理解!
大家好,我是 Rocky0429,一个连数据结构和算法都不会的蒟蒻… 学过数据结构和算法的都知道这玩意儿不好学,没学过的经常听到这样的说法还没学就觉得难,其实难吗?真难! 难在哪呢?当年我还是个小蒟蒻,初学数据结构和算法的时候,在忍着枯燥看完定义原理,之后想实现的时候,觉得它们的过程真的是七拐八绕,及其难受。 在简单的链表、栈和队列这些我还能靠着在草稿上写写画画理解过程,但是到了数论、图...
【搞定 Java 并发面试】面试最常问的 Java 并发基础常见面试题总结!
本文为 SnailClimb 的原创,目前已经收录自我开源的 JavaGuide 中(61.5 k Star!【Java学习 面试指南】 一份涵盖大部分Java程序员所需要掌握的核心知识。欢迎 Star!)。 另外推荐一篇原创:终极推荐!可能是最适合你的Java学习路线 方法 网站 书籍推荐! Java 并发基础常见面试题总结 1. 什么是线程和进程? 1.1. 何为进程? 进程是程...
西游记团队中如果需要裁掉一个人,会先裁掉谁?
2019年互联网寒冬,大批企业开始裁员,下图是网上流传的一张截图: 裁员不可避免,那如何才能做到不管大环境如何变化,自身不受影响呢? 我们先来看一个有意思的故事,如果西游记取经团队需要裁员一名,会裁掉谁呢,为什么? 西游记团队组成: 1.唐僧 作为团队teamleader,有很坚韧的品性和极高的原则性,不达目的不罢休,遇到任何问题,都没有退缩过,又很得上司支持和赏识(直接得到唐太宗的任命,既给
shell脚本:备份数据库、代码上线
备份MySQL数据库 场景: 一台MySQL服务器,跑着5个数据库,在没有做主从的情况下,需要对这5个库进行备份 需求: 1)每天备份一次,需要备份所有的库 2)把备份数据存放到/data/backup/下 3)备份文件名称格式示例:dbname-2019-11-23.sql 4)需要对1天以前的所有sql文件压缩,格式为gzip 5)本地数据保留1周 6)需要把备份的数据同步到远程备份中心,假如...
iOS Bug 太多,苹果终于坐不住了!
开源的 Android 和闭源的 iOS,作为用户的你,更偏向哪一个呢? 整理 | 屠敏 出品 | CSDN(ID:CSDNnews) 毋庸置疑,当前移动设备操作系统市场中,Android 和 iOS 作为两大阵营,在相互竞争的同时不断演进。不过一直以来,开源的 Android 吸引了无数的手机厂商涌入其中,为其生态带来了百花齐放的盛景,但和神秘且闭源的 iOS 系统相比,不少网友...
神经⽹络可以计算任何函数的可视化证明
《Neural Networks and Deep Learning》读书笔记第四篇本章其实和前面章节的关联性不大,所以大可将本章作为小短文来阅读,当然基本的深度学习基础还是要有的。主要介绍了神经⽹络拥有的⼀种普遍性,比如说不管目标函数是怎样的,神经网络总是能够对任何可能的输入,其值(或者说近似值)是网络的输出,哪怕是多输入和多输出也是如此,我们大可直接得出一个结论:不论我们想要计算什么样的函数,...
聊聊C语言和指针的本质
坐着绿皮车上海到杭州,24块钱,很宽敞,在火车上非正式地聊几句。 很多编程语言都以 “没有指针” 作为自己的优势来宣传,然而,对于C语言,指针却是与生俱来的。 那么,什么是指针,为什么大家都想避开指针。 很简单, 指针就是地址,当一个地址作为一个变量存在时,它就被叫做指针,该变量的类型,自然就是指针类型。 指针的作用就是,给出一个指针,取出该指针指向地址处的值。为了理解本质,我们从计算机模型说起...
为什么你学不过动态规划?告别动态规划,谈谈我的经验
动态规划难吗?说实话,我觉得很难,特别是对于初学者来说,我当时入门动态规划的时候,是看 0-1 背包问题,当时真的是一脸懵逼。后来,我遇到动态规划的题,看的懂答案,但就是自己不会做,不知道怎么下手。就像做递归的题,看的懂答案,但下不了手,关于递归的,我之前也写过一篇套路的文章,如果对递归不大懂的,强烈建议看一看:为什么你学不会递归,告别递归,谈谈我的经验 对于动态规划,春招秋招时好多题都会用到动态...
程序员一般通过什么途径接私活?
二哥,你好,我想知道一般程序猿都如何接私活,我也想接,能告诉我一些方法吗? 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”,还有很多读者问过我类似这样的问题。 我接的私活不算多,挣到的钱也没有多少,加起来不到 20W。说实话,这个数目说出来我是有点心虚的,毕竟太少了,大家轻喷。但我想,恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉,我也算是有经验的人了。 唾弃接私活、做外...
字节跳动面试官这样问消息队列:分布式事务、重复消费、顺序消费,我整理了一下
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群,欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸...
如何安装 IntelliJ IDEA 最新版本——详细教程
IntelliJ IDEA 简称 IDEA,被业界公认为最好的 Java 集成开发工具,尤其在智能代码助手、代码自动提示、代码重构、代码版本管理(Git、SVN、Maven)、单元测试、代码分析等方面有着亮眼的发挥。IDEA 产于捷克,开发人员以严谨著称的东欧程序员为主。IDEA 分为社区版和付费版两个版本。 我呢,一直是 Eclipse 的忠实粉丝,差不多十年的老用户了。很早就接触到了 IDEA...
面试还搞不懂redis,快看看这40道面试题(含答案和思维导图)
Redis 面试题 1、什么是 Redis?. 2、Redis 的数据类型? 3、使用 Redis 有哪些好处? 4、Redis 相比 Memcached 有哪些优势? 5、Memcache 与 Redis 的区别都有哪些? 6、Redis 是单进程单线程的? 7、一个字符串类型的值能存储最大容量是多少? 8、Redis 的持久化机制是什么?各自的优缺点? 9、Redis 常见性...
大学四年自学走来,这些珍藏的「实用工具/学习网站」我全贡献出来了
知乎高赞:文中列举了互联网一线大厂程序员都在用的工具集合,涉及面非常广,小白和老手都可以进来看看,或许有新收获。
为什么要推荐大家学习字节码?
配套视频: 为什么推荐大家学习Java字节码 https://www.bilibili.com/video/av77600176/ 一、背景 本文主要探讨:为什么要学习 JVM 字节码? 可能很多人会觉得没必要,因为平时开发用不到,而且不学这个也没耽误学习。 但是这里分享一点感悟,即人总是根据自己已经掌握的知识和技能来解决问题的。 这里有个悖论,有时候你觉得有些技术没用恰恰是...
互联网公司的裁员,能玩出多少种花样?
裁员,也是一门学问,可谓博大精深!以下,是互联网公司的裁员的多种方法:-正文开始-135岁+不予续签的理由:千禧一代网感更强。95后不予通过试用期的理由:已婚已育员工更有责任心。2通知接下来要过苦日子,让一部分不肯同甘共苦的员工自己走人,以“兄弟”和“非兄弟”来区别员工。3强制996。员工如果平衡不了工作和家庭,可在离婚或离职里二选一。4不布置任何工作,但下班前必须提交千字工作日报。5不给活干+...
【超详细分析】关于三次握手与四次挥手面试官想考我们什么?
在面试中,三次握手和四次挥手可以说是问的最频繁的一个知识点了,我相信大家也都看过很多关于三次握手与四次挥手的文章,今天的这篇文章,重点是围绕着面试,我们应该掌握哪些比较重要的点,哪些是比较被面试官给问到的,我觉得如果你能把我下面列举的一些点都记住、理解,我想就差不多了。 三次握手 当面试官问你为什么需要有三次握手、三次握手的作用、讲讲三次三次握手的时候,我想很多人会这样回答: 首先很多人会先讲下握...
新程序员七宗罪
当我发表这篇文章《为什么每个工程师都应该开始考虑开发中的分析和编程技能呢?》时,我从未想到它会对读者产生如此积极的影响。那些想要开始探索编程和数据科学领域的人向我寻求建议;还有一些人问我下一篇文章的发布日期;还有许多人询问如何顺利过渡到这个职业。我非常鼓励大家继续分享我在这个旅程的经验,学习,成功和失败,以帮助尽可能多的人过渡到一个充满无数好处和机会的职业生涯。亲爱的读者,谢谢你。 -罗伯特。 ...
活到老,学到老,程序员也该如此
全文共2763字,预计学习时长8分钟 图片来源:Pixabay 此前,“网传阿里巴巴要求尽快实现P8全员35周岁以内”的消息闹得沸沸扬扬。虽然很快被阿里辟谣,但苍蝇不叮无缝的蛋,无蜜不招彩蝶蜂。消息从何而来?真相究竟怎样?我们无从而知。我们只知道一个事实:不知从何时开始,程序猿也被划在了“吃青春饭”行业之列。 饱受“996ICU”摧残后,好不容易“头秃了变强了”,即将步入为“高...
Vue快速实现通用表单验证
本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载。博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用...
2019年Spring Boot面试都问了什么?快看看这22道面试题!
Spring Boot 面试题 1、什么是 Spring Boot? 2、Spring Boot 有哪些优点? 3、什么是 JavaConfig? 4、如何重新加载 Spring Boot 上的更改,而无需重新启动服务器? 5、Spring Boot 中的监视器是什么? 6、如何在 Spring Boot 中禁用 Actuator 端点安全性? 7、如何在自定义端口上运行 Sprin...
【图解】记一次手撕算法面试:字节跳动的面试官把我四连击了
字节跳动这家公司,应该是所有秋招的公司中,对算法最重视的一个了,每次面试基本都会让你手撕算法,今天这篇文章就记录下当时被问到的几个算法题,并且每个算法题我都详细着给出了最优解,下面再现当时的面试场景。看完一定让你有所收获 一、小牛试刀:有效括号 大部分情况下,面试官都会问一个不怎么难的问题,不过你千万别太开心,因为这道题往往可以拓展出更多有难度的问题,或者一道题看起来很简单,但是给出最优解,确实很...
关于裁员几点看法及建议
最近网易裁员事件引起广泛关注,昨天网易针对此事,也发了声明,到底谁对谁错,孰是孰非?我们作为吃瓜观众实在是知之甚少,所以不敢妄下定论。身处软件开发这个行业,近一两年来,对...
面试官:关于Java性能优化,你有什么技巧
通过使用一些辅助性工具来找到程序中的瓶颈,然后就可以对瓶颈部分的代码进行优化。 一般有两种方案:即优化代码或更改设计方法。我们一般会选择后者,因为不去调用以下代码要比调用一些优化的代码更能提高程序的性能。而一个设计良好的程序能够精简代码,从而提高性能。 下面将提供一些在JAVA程序的设计和编码中,为了能够提高JAVA程序的性能,而经常采用的一些方法和技巧。 1.对象的生成和大小的调整。 J...
相关热词 c# id读写器 c#俄罗斯方块源码 c# linq原理 c# 装箱有什么用 c#集合 复制 c# 一个字符串分组 c++和c#哪个就业率高 c# 批量动态创建控件 c# 模块和程序集的区别 c# gmap 截图
立即提问

相似问题

1
react-router如何像vue-router通过this.$router.push的方式编程实现路由跳转
1
Vue点击事件无效:Invalid handler for event "click": got undefined
1
Vue引用ActiveX插件,插件可以正常渲染出来,但无法正常使用,提示“找不到成员”
1
Vue-router的问题,使用路由嵌套的时候,为何子路由的内容不被渲染到router-view?
6
关于vue 的格式规范问题:理数据
0
vue引入mqtt无法在平板上显示页面
0
前端基于框架(类似vue-cli || ionic) 后的css规范问题
1
vue 完全独立的两个组件可以做到数据共享,数据监听吗?
2
vue项目中遇到的问题,求大神解答,很急 谢谢你们
2
vue使用swiper组件获得activeIndex后,如何实现实时监听activeIndex,如果发生变化则设置flag属性为false
1
vue工程中$emit()无法调用
2
elementUI组件使用的问题
1
vue-loader安装后在.vue里的<style></style>里面写样式就报错?
3
ElementUI 中的Upload组件绑定的file-list不起作用的问题
1
element分页组件怎么垂直显示?
3
vue里的组件之间传值,用query传回来 渲染对应的input
0
vue elemen form 循环加组件抽离形式怎么才能准确的传值???加急!!!!!
1
在使用vue-preview缩略图时src图太大了,怎么调小?
1
如下页面 浏览器 上下滑动 会卡顿,求解决
0
vue项目,在切换路由时内存没有释放,再次切换回原路由或者是其他页面,为什么内存又被释放了?