slot 插槽 不显示

在排除一切代码问题后,就考虑vue和vue-template-compiler的版本适配问题

当 vue的版本大于 2.6.12时,就会出现这种情况,由于 vue-template-compiler 需要与vue的版本同步

解决方案就是把 vue和vue-template-compiler的版本降低到 2.6.12 及以下即可。

注意当前项目package.json中 插件版本号不同写法 的含义

vue:"2..6.12"          匹配固定版本2..6.12

vue:"~2.16.12"       匹配更新到2.16.x的最新版本    前两位(2  16)固定,最后一位用最新的

vue:"^2.16.12"       匹配更新到2.x.x的最新版本       版本首位(2)固定,后面两位用最新的

当我们使用最新的Node运行‘npm instal --save xxx',的时候,他会优先考虑使用插入符号(^)而不是波浪符号(~)了。

这对于你来说意味这什么呢?首先我们需要理解这两者(~和^)的区别。

波浪符号(~):他会更新到当前minor version(也就是中间的那位数字)中最新的版本。放到我们的例子中就是:vue:~1.15.2,这个库会去匹配更新到1.15.x的最新版本,如果出了一个新的版本为1.16.0,则不会自动升级。波浪符号是曾经npm安装时候的默认符号,现在已经变为了插入符号。
插入符号(^):这个符号就显得非常的灵活了,他将会把当前库的版本更新到当前major version(也就是第一位数字)中最新的版本。放到我们的例子中就是:bluebird:^3.3.4,这个库会去匹配3.x.x中最新的版本,但是他不会自动更新到4.0.0。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中的插槽Slots)是一种在父组件中将子组件的内容进行分发的机制。通过插槽,我们可以在父组件中定义一些占位符,然后在子组件中填充具体的内容。 在Vue中,插槽有两种类型:具名插槽和默认插槽。 具名插槽允许我们在父组件中使用多个不同的插槽,并且可以根据需要进行分发和填充。我们可以使用`<slot>`元素和`name`属性来定义具名插槽。例如: ```html <!-- 父组件 --> <template> <div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> </template> <!-- 子组件 --> <template> <div> <slot name="header"> <!-- 默认插槽内容 --> <h1>默认标题</h1> </slot> <p>子组件内容</p> <slot name="footer"> <!-- 默认插槽内容 --> <p>默认页脚</p> </slot> </div> </template> ``` 在上面的例子中,父组件定义了三个插槽:`header`、默认插槽和`footer`。子组件可以根据需要填充这些插槽,并且如果没有提供相应的内容,那么会显示插槽中的默认内容。 默认插槽是没有名字的插槽,如果在父组件中没有定义具名插槽的话,子组件的内容会被分发到默认插槽中。 除了使用`<slot>`元素和`name`属性来定义插槽,我们还可以使用`<template>`元素和`v-slot`指令来定义和填充插槽。例如: ```html <!-- 父组件 --> <template> <div> <template v-slot:header> <!-- 插槽内容 --> </template> <!-- 默认插槽内容 --> <template v-slot:default> <!-- 插槽内容 --> </template> <template v-slot:footer> <!-- 插槽内容 --> </template> </div> </template> ``` 使用插槽可以使我们的组件更具灵活性,可以根据需要在父组件中定制子组件的部分内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值