日常开发记录-正确的prop传参，reduce搭配promise的使用
- 1.正确的prop传参
- 2.reduce搭配promise的使用
1.正确的prop传参
一般会的父组件传参子组件
//父组件
<A :demodata.sync="testData" :listData.sync="testData2"></A>
data () {
return {
testData: {
content: '',
textStyle: {
fontsize: '14px',
},
},
testData2: [
{
content: '11',
textStyle: {
fontsize: '14px',
},
},
],
}
},
//子组件
<el-input v-model="demodata.content"></el-input>
然后子组件v-model，看着和使用起来是可以达到双向绑定的，但是是不推荐这样改的。
//子组件
<template>
<div>
{{ demodata }}
<!-- 不要直接修改 props，使用事件通知父组件更新
使用 .sync 修饰符或 v-model 实现双向绑定,这种感觉单个属性可以，类似“监听”整个对象数组貌似不太行 -->
<el-input :value="demodata.content" @input="changeInput"></el-input>
<el-table :data="localData">
<el-table-column prop="content" label="姓名"></el-table-column>
</el-table>
<el-button @click="add">添加</el-button>
</div>
</template>
<script>
export default {
props: {
demodata: {
type: Object,
default: () => { }
},
listData: {
type: Array,
default: () => []
}
},
data () {
return {
localData: [...this.listData]
}
},
watch: {
listData: {
handler (newVal) {
this.localData = [...newVal]
},
deep: true
}
},
mounted () {
},
methods: {
changeInput (val) {
this.$emit('update:demodata', {
...this.demodata,
content: val
})
}, add () {
this.localData.push({ name: 'test' })
this.$emit('update:listData', [...this.localData])
}
}
}
</script>
还有种父组件v-model的写法
//父组件
<A v-model="testData3"></A>
testData3: {
content: '',
textStyle: {
fontsize: '14px',
},
},
//子组件
<template>
<div>
{{ demodata }}
<el-input :value="demodata.content" @input="updateContent"></el-input>
</div>
</template>
<script>
export default {
model: {
prop: 'demodata',
event: 'update:demodata'
},
props: {
demodata: {
type: Object,
default: () => { }
},
},
methods: {
updateContent (val) {
this.$emit('update:demodata', { ...this.demodata, content: val });
}
}
}
</script>
子组件的写法要注意，model选项里的prop和event都是自定义的，但是要一一对应。
在 Vue 2 中，一个组件上默认只能使用一个 v-model。这是因为 v-model 在 Vue 2 中主要是作为语法糖，用于简化父子组件间的双向数据绑定，它默认绑定到子组件的 value 属性上，并监听 input 事件（除非通过 model 选项进行了自定义）。
然而，如果你需要在 Vue 2 中实现多个双向数据绑定，你可以使用 .sync 修饰符作为替代方案。.sync 修饰符允许你绑定一个对象或多个属性，并在子组件中通过触发特定格式的事件（update:属性名）来更新父组件中的数据。
2.reduce搭配promise的使用
logInOrder (urls) {
const textPromises = urls.map((url) => {
return fetch(url)
.then((response) => response.json()) // 修改为 json() 因为返回的是 JSON 数据
.then((data) => JSON.stringify(data, null, 2)) // 格式化输出
})
console.log('log', textPromises)
return textPromises.reduce((chain, textPromise) => {
console.log('chain', chain,'textPromise', textPromise)
return chain
.then(() => textPromise)
.then((text) => {
console.log('获取到的数据：\n', text)
console.log('------------------------')
return text
})
}, Promise.resolve())
},
reduce里面的代码有点没太理解，本来一般也少写，特别是then(() => textPromise)这没太看懂，改下写法：
logInOrder(urls) {
const textPromises = urls.map(url => {
return fetch(url)
.then(response => response.json())
.then(data => JSON.stringify(data, null, 2));
});
return textPromises.reduce((chain, textPromise) => {
return chain.then(() => {
return textPromise.then(text => {
console.log('获取到的数据：\n', text);
console.log('------------------------');
return text;
});
});
}, Promise.resolve());
}
现在看得清楚了多，看一次的执行，就是轮询调用promise.then。而且有return text和没有return text的每次chain也是不一样的。
//调用实例
const a = this.logInOrder([
'https://jsonplaceholder.typicode.com/posts/1',
'https://jsonplaceholder.typicode.com/posts/2',
'https://jsonplaceholder.typicode.com/posts/3',
'https://jsonplaceholder.typicode.com/posts/4',
'https://jsonplaceholder.typicode.com/posts/5'
])
console.log('a', a)
猜猜它的打印结果呢。
有点出乎我的意料。。。，怎么也不会是这个结果嘛感觉。自己想的理想输出是先打印chain，然后是获取到的数据，最后再是a的值，而且a也不应该是一个promise吧。这段代码里有很多的return，第一个return是函数整体的返回值给return出去，第二个return是reduce函数里传递给下一个的，第三个return是为了按顺序将多个异步按顺序串起来。最后一个return是整个函数要返回的值。
之所以现在的打印结果是上面的这个，其实可以当成先执行的同步，再执行到异步代码。把最后的结果换个写法
async mounted () {
const a = await this.logInOrder([
'https://jsonplaceholder.typicode.com/posts/1',
'https://jsonplaceholder.typicode.com/posts/2',
'https://jsonplaceholder.typicode.com/posts/3',
'https://jsonplaceholder.typicode.com/posts/4',
'https://jsonplaceholder.typicode.com/posts/5'
])
console.log('a', a)
},
或则
mounted () {
this.logInOrder([
'https://jsonplaceholder.typicode.com/posts/1',
'https://jsonplaceholder.typicode.com/posts/2',
'https://jsonplaceholder.typicode.com/posts/3',
'https://jsonplaceholder.typicode.com/posts/4',
'https://jsonplaceholder.typicode.com/posts/5'
]).then(a =>{
console.log('a', a)
})
},
打印出来的结果就是我理想中的了。
