首页 >> js开发 >> jsvue基础知识--axios合并请求和slotjs大全
jsvue基础知识--axios合并请求和slotjs大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
一、axios合并请求一、axios合并请求
export default {
data(){
return {}
},
created(){
function getMsg(res1,res2){
console.log(res1)
console.log(res2)
}
this.$axios.all([
this,axios.post('URL','key=value'),
this.axios.get('URL')
])
.then(this.$axios.spread(getMsg)) //分发响应
.catch(err => {
console.log(err)
})
}
}
export default {
data(){
return {}
},
created(){
function getMsg(res1,res2){
console.log(res1)
console.log(res2)
}
this.$axios.all([
this,axios.post('URL','key=value'),
this.axios.get('URL')
])
.then(this.$axios.spread(getMsg)) //分发响应
.catch(err => {
console.log(err)
})
}
}这样可以实现发送两个请求,只有所有都成功,才算是成功。只要有一个失败,就算是失败。二、插槽slot二、插槽slot1.基本用法插槽的出现使得我们可以在使用子组件时在子组件内新增内容,而不仅仅是简单的使用,呈现出多样化的子组件。
Your Profile
Your Profile
当我们使用子组件navigation时,在子组件中写入一些内容,但是如果我们子组件的template中没有一个插槽slot,那么我们写入的Your Profile没有的地方放,子组件怎么知道要放在哪里呢,不知道放在哪里,所以它就干脆不放了,会把写的内容抛弃,大家就当无事发生过,子组件里怎么写,它就怎么呈现,全然不顾你在使用时写入的东西,当做没有看见。
但是如果我们在子组件中写入了一个插槽slot,那么我们传入的内容将会被在这个插槽处呈现。像下面这样navigationtemplateslotYour Profileslot
渲染出来的结果将是:
Your Profile
Your Profile
2.具名插槽有时候,我们需要在子组件中放置多个内容,那么你只有一个slot,它只能全部放在这里(其实我也不知道是不是这样我没有试过),如果你有多个slot,它怎么知道哪个内容要放在哪个slot,按顺序放吗?不是的(其实我也不知道是不是)。正确的做法就是使用具名插槽。所谓具名插槽就是一个带有name的slot。也就是下面这样slotslotslotnameslot
然后在使用上面这个子组件时像下面这样
在使用时,通过一个具有slot属性的标签,属性值对应slot的name,将内容放到子组件的相应位置上去。slotslotname我们注意到,里面有一个没有指定name的slot,它就是默认插槽。所有在使用子组件时传入的东西,只要没有指定slot='slot的name',就都会放在这里。nameslotslot='slot的name'我们还注意到,这里用的一个叫做template的标签,一定要用它吗?不是的,也可以直接放在h1或者p上面,像下面这样templateh1p
但是,如果你并不只有一个h1,你还有其他内容也要一起放在这个插槽里,那你能怎么办,为每一个要放在插槽里的标签加slot吗?太麻烦啦!所以就一起放在template里面,给template加slot咯。h1slottemplatetemplateslot3.插槽的默认内容有时候,我们也需要为某个插槽指定默认内容。比如一个按钮,默认显示是 submit ,但我们有时在复用它的时候,我们又想改成别的,这个时候,就可以把这个按钮的 submit 放在slot里面,然后在使用这个子组件的时候,放你要改的东西去改变它。如果没有放,那就是默认的 submit。slot
4.作用域在插槽中传值时,如果想要使用数据,这个数据应该是父组件的,而不能是子组件的。也就是说是使用子组件的那个组件的data。data
Logged in as {{ user.name }}
Logged in as {{ user.name }}
这里的user不是navigation-link的,而是父组件的navigation-link牢记一条准则:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。5.作用域插槽 【2.1.0+ 新增】(我也不知道为什么要叫这个名字,和插槽的作用于太像,很容易搞混啊)上面我们提到,插槽是具有作用于的,且当我们在使用子组件时,是无法获取子组件的数据的。而有时,我们又需要获取它,那么应该怎么办呢?比如一个名为todo-list的子组件,它的内容如下:todo-list
✓
{{ slotProps.todo.text }}
✓
{{ slotProps.todo.text }}
这时即使我们是在父组件中,也还是可以获取到子组件的数据。其中slotProps只是一个名字,我们用slot-scope指定为什么名字,就可以在下面用xx.来获取子组件的data
在 2.5.0+,slot-scope 不再限制在 元素上使用,而可以用在插槽内的任何元素或组件上。slotPropsslot-scopexx.data以上就是详解vue中的axios和slot的详细内容,关于vue axios和slot的资料请关注其它相关文章!
export default {
data(){
return {}
},
created(){
function getMsg(res1,res2){
console.log(res1)
console.log(res2)
}
this.$axios.all([
this,axios.post('URL','key=value'),
this.axios.get('URL')
])
.then(this.$axios.spread(getMsg)) //分发响应
.catch(err => {
console.log(err)
})
}
}
export default {
data(){
return {}
},
created(){
function getMsg(res1,res2){
console.log(res1)
console.log(res2)
}
this.$axios.all([
this,axios.post('URL','key=value'),
this.axios.get('URL')
])
.then(this.$axios.spread(getMsg)) //分发响应
.catch(err => {
console.log(err)
})
}
}这样可以实现发送两个请求,只有所有都成功,才算是成功。只要有一个失败,就算是失败。二、插槽slot二、插槽slot1.基本用法插槽的出现使得我们可以在使用子组件时在子组件内新增内容,而不仅仅是简单的使用,呈现出多样化的子组件。
Your Profile
Your Profile
但是如果我们在子组件中写入了一个插槽slot,那么我们传入的内容将会被在这个插槽处呈现。像下面这样navigationtemplateslotYour Profileslot
渲染出来的结果将是:
Your Profile
Your Profile
2.具名插槽有时候,我们需要在子组件中放置多个内容,那么你只有一个slot,它只能全部放在这里(其实我也不知道是不是这样我没有试过),如果你有多个slot,它怎么知道哪个内容要放在哪个slot,按顺序放吗?不是的(其实我也不知道是不是)。正确的做法就是使用具名插槽。所谓具名插槽就是一个带有name的slot。也就是下面这样slotslotslotnameslot
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
4.作用域在插槽中传值时,如果想要使用数据,这个数据应该是父组件的,而不能是子组件的。也就是说是使用子组件的那个组件的data。data
Logged in as {{ user.name }}
Logged in as {{ user.name }}
- v-bind:key="todo.id">
{{ todo.text }}
- v-bind:key="todo.id">
{{ todo.text }}
{{ todo.text }}
{{ todo.text }}
✓
{{ slotProps.todo.text }}
✓
{{ slotProps.todo.text }}
在 2.5.0+,slot-scope 不再限制在 元素上使用,而可以用在插槽内的任何元素或组件上。slotPropsslot-scopexx.data以上就是详解vue中的axios和slot的详细内容,关于vue axios和slot的资料请关注其它相关文章!
相关文章:
- js解决vue的router组件component在import时不能使用变量问题js大全
- jsVue-CLI 3 scp2自动部署项目至服务器的方法js大全
- js解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题js大全
- js解决vue中的无限循环问题js大全
- jsvue 监听窗口变化对页面部分元素重新渲染操作js大全
- jsvue键盘事件点击事件加native操作js大全
- jsvue+element-ui JYAdmin后台管理系统模板解析js大全
- jsJS的时间格式化和时间戳转换函数示例详解js大全
- jsJS实现audio音频剪裁剪切复制播放与上传(步骤详解)js大全
- js代码处理JavaScript值为undefined的7个小技巧