旅游网站结构图,泉州建设网站公司,网页跳转链接怎么制作,医院网站建设运营方案日常开发记录-正确的prop传参#xff0c;reduce搭配promise的使用 1.正确的prop传参2.reduce搭配promise的使用 1.正确的prop传参
一般会的父组件传参子组件
//父组件
A :demodata.synctestData :listData.synctestData2/A
data ()… 日常开发记录-正确的prop传参reduce搭配promise的使用 1.正确的prop传参2.reduce搭配promise的使用 1.正确的prop传参
一般会的父组件传参子组件
//父组件
A :demodata.synctestData :listData.synctestData2/A
data () {return {testData: {content: ,textStyle: {fontsize: 14px,},},testData2: [{content: 11,textStyle: {fontsize: 14px,},},],}},
//子组件
el-input v-modeldemodata.content/el-input然后子组件v-model看着和使用起来是可以达到双向绑定的但是是不推荐这样改的。
//子组件
templatediv{{ demodata }}!-- 不要直接修改 props使用事件通知父组件更新
使用 .sync 修饰符或 v-model 实现双向绑定,这种感觉单个属性可以类似“监听”整个对象数组貌似不太行 --el-input :valuedemodata.content inputchangeInput/el-inputel-table :datalocalDatael-table-column propcontent label姓名/el-table-column/el-tableel-button clickadd添加/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-modeltestData3/AtestData3: {content: ,textStyle: {fontsize: 14px,},},//子组件
templatediv{{ demodata }}el-input :valuedemodata.content inputupdateContent/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)})},打印出来的结果就是我理想中的了。
