日常开发记录-正确的prop传参，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)})},

打印出来的结果就是我理想中的了。