一、vue加载顺序？

父组件 created
子组件 created
子组件 mounted
父组件 mounted

二、父组件和子组件

1.封装ip地址框

<template><ul class="ipAdress"><!-- <p>{{ value }}</p> --><li v-for="(item, index) in ipAddress" :key="index"><inputref="ipInput"v-model="item.value"type="text"class="ipInputClass"@input="checkIpVal(item)"@keyup="turnIpPosition(item, index, $event)"/><div></div></li></ul>
</template><script>
export default {props: {value: {type: String,default: '',},},data() {return {ipAddress: [{value: this.value == '' ? '' : this.value.slice(0, 3),},{value: this.value == '' ? '' : this.value.slice(4, 6),},{value: this.value == '' ? '' : this.value.slice(7, 9),},{value: this.value == '' ? '' : this.value.slice(10, 12),},],}},watch: {ipAddress: {// 双向数据绑定的valuehandler: function (newVal, oldVal) {console.log(this.value)let str = ''for (const i in this.ipAddress) {// console.log(this.value)// if(this.value !=''){//     this.ipAddress[i].value = this.value.slice(0,3)// }str += this.formatter(this.ipAddress[i].value)}if (str === '000000000000') {str = ''}this.$emit('input', str)},deep: true,},},mounted() {let pMountedTimer = window.setInterval(() => {if (window.parentMounted ) {window.clearInterval(pMountedTimer)// 下面就可以写子组件想在mounted时执行代码（此时父组件的mounted已经执行完毕）console.log(this.value)this.ipAddress = [{value: this.value == '' ? '' : this.value.slice(0, 3),},{value: this.value == '' ? '' : this.value.slice(4, 6),},{value: this.value == '' ? '' : this.value.slice(7, 9),},{value: this.value == '' ? '' : this.value.slice(10, 12),},]}}, 500)},methods: {// 格式化补零方法formatter(val) {let value = val.toString()if (value.length === 2) {value = '0' + value} else if (value.length === 1) {value = '00' + value} else if (value.length === 0) {value = '000'}return value},// 检查ip输入为0-255checkIpVal(item) {//确保每个值都处于0-255let val = item.value// 处理非数字val = val.toString().replace(/[^0-9]/g, '')val = parseInt(val, 10)if (isNaN(val)) {val = ''} else {val = val < 0 ? 0 : valval = val > 255 ? 255 : val}item.value = val},// 光标位置判断turnIpPosition(item, index, event) {let self = thislet e = event || window.eventif (e.keyCode === 37) {// 左箭头向左跳转，左一不做任何措施if (index !== 0 && e.currentTarget.selectionStart === 0) {self.$refs.ipInput[index - 1].focus()}} else if (e.keyCode == 39) {// 右箭头向右跳转，右一不做任何措施if (index !== 3 && e.currentTarget.selectionStart === item.value.toString().length) {self.$refs.ipInput[index + 1].focus()}} else if (e.keyCode === 8) {// 删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理if (index !== 0 && item.value === '') {self.$refs.ipInput[index - 1].focus()}} else if (e.keyCode === 13 || e.keyCode === 32 || e.keyCode === 190) {// 回车键、空格键、冒号均向右跳转，右一不做任何措施if (index !== 3) {self.$refs.ipInput[index + 1].focus()}} else if (item.value.toString().length === 3) {// 满3位，光标自动向下一个文本框if (index !== 3) {self.$refs.ipInput[index + 1].focus()}}},},
}
</script>
<style type="text/css" scoped>
.ipAdress {display: flex;border: 1px solid #dcdfe6;border-radius: 4px;width: 196px;height: 36px;padding-inline-start: 0px;
}
.ipAdress li {position: relative;height: 36px;margin: 0;list-style-type: none;
}
.ipInputClass {border: none;width: 49px;height: 23px;text-align: center;background: transparent;
}
.ipAdress li div {position: absolute;bottom: 8px;right: 0;border-radius: 50%;background: #505050;width: 2px;height: 2px;
}
/*只需要3个div*/
.ipAdress li:last-child div {display: none;
}
/*取消掉默认的input focus状态*/
.ipAdress input:focus {outline: none;
}
</style>

2.前端从数据库取数据并且赋值

  mounted() {this.getlist()window.parentMounted = this._isMounted},

bug

此时因为先加载子类的mounted在加载父类mounted,所以getlist取到的值无法返回给子组件格式化,会出现undefined问题

解决方案

// 父组件
mounted() {window.parentMounted = this._isMounted  // _isMounted是当前实例mouned()是否执行 此时为true
}

// 子组件
// 子组件
mounted() {let pMountedTimer = window.setInterval(() => {if (window.parentMounted ) {window.clearInterval(pMountedTimer)// 此时父组件的mounted已经执行完毕.........}}, 500)
}

Vue父组件mounted执行完后再执行子组件mounted执行顺序问题相关推荐

c#中等待某个线程执行完后再执行某个线程
在方法的外部申请一个这样的变量 CountdownEvent latch = new CountdownEvent(3); 比如现在执行的是方法a public void a() { int si=0 ...
Vue父组件网络请求回数据后再给子组件传值demo示例
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票这里demo使用延迟执行模拟网络请求:父组件给子组件需要使用自定义属性 Prop ,下面是示例代码: &l ...
怎么保证在多线程任务都执行完后再执行某一动作 CountDownLatch
在开发过程当中,我们使用了多线程来异步执行多任务,但是我们想在这些任务执行完成后,才接着再执行的话,就需要使用到CountDownLatch这个类了. 首先我们需要知道被执行任务的个数,比如这里是有2 ...
vue在一个方法执行完后执行另一个方法
vue在一个方法执行完后执行另一个方法用Promise来实现. Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加then和catch函数,处理成功和失败的情况 ES7中 ...
Java多线程面试题之如何让主线程等子线程执行完之后再执行
问题描述现在有一个主线程X,和两个子线程A和B,A和B之间没有依赖关系且两者的执行时间不确定,现在要求如下: 1:不限制A和B执行顺序的 2:主线程X需要在子线程A和B执行完成之后再执行方案1 1 ...
vue.js组件之j间的通讯一子组件接受父祖件数据
Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...
vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法...
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法"问题疑问,本网通过在网上对" (v ...
为什么当项目启动后执行两次过滤器再进行访问资源时执行一次过滤器
为什么当项目启动后执行两次过滤器再进行访问资源时执行一次过滤器粗线的理解,启动项目后进行了两次请求,访问两次过滤器.访问资源时只进行一次请求,所以访问一次过滤器. 于是为了更加清楚地看清在启动项目 ...
vue父组件异步获取动态数据传递给子组件获取不到值
原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...

Vue父组件mounted执行完后再执行子组件mounted执行顺序问题

文章目录

一、vue加载顺序？

二、父组件和子组件

1.封装ip地址框

2.前端从数据库取数据并且赋值

bug

解决方案

Vue父组件mounted执行完后再执行子组件mounted执行顺序问题相关推荐

最新文章

热门文章