个人笔记(vue篇)

插槽

不知道为什么我永远会忘记这个怎么用， 使用具名插槽的时候总是出错，晕死。。。

还有作用域插槽我也一直没搞懂5555

匿名插槽

这个比较简单

子组件

父组件

一个组件里只放一个匿名插槽,也不是不能放,就是放了是下面的效果:

插槽默认值

此时的页面

还有一个就是获取插槽的默认内容

匿名插槽就这样,比较简单。

本文由“壹伴编辑器”提供技术支持

具名插槽 v-slot:插槽名字

子组件

父组件使用

语法糖: #插槽名字

另外注意，插槽的名字只能写在template标签和组件上

也不能重复使用：

本文由“壹伴编辑器”提供技术支持

作用域插槽

通过slot 我们可以在父组件为子组件添加内容，通过给slot命名的方式，我们可以添加不止一个位置的内容。但是我们添加的数据都是父组件内的。前面的方法不能直接使用子组件内的数据，但是我们是否有其他的方法，让我们能够使用子组件的数据呢？其实我们也可以使用v-slot的方式：

适用的场景：比如有些有些数据是靠子组件获得的却想在父组件中展示，那么这个时候就要用到作用域插槽了。

子组件

父组件使用

换成对象：

要用哪个取哪个就好了，当然不是具名插槽也可以使用的。

okok终于搞懂这玩意了

本文由“壹伴编辑器”提供技术支持

混入 Mixin

概念：将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。

就随便写一下这个吧，感觉就是把一些变量和方法放在一个文件里，要用就直接调用。

本文由“壹伴编辑器”提供技术支持

自动注入

在当前项目下执行一下命令vue add style-resources-loader，添加一个vuecli的插件，如果遇到警告，直接输入y。

本文由“壹伴编辑器”提供技术支持

vue生命周期

本文由“壹伴编辑器”提供技术支持

在这里补充一个自己遇到的问题吧，就是在浏览器中，使用图片地址可以打开，但是在vue中的img标签的src里使用这个图片地址时却会报404错误，是需要在public的index文件中加上一行

<meta name="referrer" content="no-referrer" />

原因：

http请求体的header中有一个referrer字段，用来表示发起http请求的源地址信息，这个referrer信息是可以省略但是不可修改的，就是说你只能设置是否带上这个referrer信息，不能定制referrer里面的值

服务器端在拿到这个referrer值后就可以进行相关的处理，比如图片资源，可以通过referrer值判断请求是否来自本站
图片服务器做了防盗链的这种情况下就会有这种问题，因为图片服务器根据referrer值判断不是本站，就访问不到