Vue中插槽和配置代理如何使用

这篇“Vue中插槽和配置代理如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue中插槽和配置代理如何使用”文章吧。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名申请、虚拟空间、营销软件、网站建设、博望网站维护、网站推广。

一,插槽

1.什么是插槽

让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件——>子组件。插槽分为三种,分别是默认插槽、具名插槽、作用域插槽,下面分别列出了如何使用这三种插槽

1.1默认插槽

啥是默认插槽呢?其实默认插槽相当于你买了一新房子,然后各个房间都已经装饰好了,但是你还有一间屋子还没装修,因为你暂时不知道里面要装一套电竞设备还是弄一书柜,所以先在那屋留好地方,这时候你来到了商场,看到一心仪的书柜,然后就跟销售人员说,这个我买了,之后就把这个书柜放到了那个空出来的屋子里,插槽也是如此,子组件好比空屋子,父组件好比心仪书柜(记住<子组件内定义插槽,父组件内写好数据>即可)

子组件内定义一个插槽

父组件内填充数据

 
      
 

1.2具名插槽

简单来说在子组件内具名插槽比默认的插槽多了一个name属性,在父组件内多了这样一行代码 slot = "具名插槽名",具名插槽能更好的控制所要放置数据的位置

父组件使用center和footer插槽

      
          // 使用center具名插槽
            {{g}}
          
          // 使用footer具名插槽
            植物大战讲师
            冰火人闯森林
          
      

子组件内定义conter和footer具名插槽

 

1.3作用域插槽

理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中, 但使用数据所遍历出来的结构由App组件决定)

父组件

    
      
        
          {{g}}         
           

子组件


二,配置代理

方式1:在vue.config.js中添加如下配置

    devServer:{

        proxy: "http://localhost:5000"

    }

注意:

优点:配置简单直接发请求给8080端口即可

缺点:不能配置多个代理且不灵活(若自己有资源,但是需要请求非前端资源,只能走自己已有的资源)

代理流程:发送请求?开启代理?如果前端有资源那么拿来就用,如果没有去请求资源

Vue中插槽和配置代理如何使用

方式2:在vue.config.js中添加如下配置

  devServer: {
    proxy: {
      '/shanyu': {// 匹配所有以'shanyu'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        pathRewrite: {
            '^/shanyu': '' // 将所有的前缀替换为空串再去服务器内擦护照该路径
             // ws和changeOrigin默认都为true
            // ws: true, // 用于支持websocket
               // changeOrigin: true // 用于控制请求头host的值
        },
          //changeOrigin设置为true时,服务器收到的请求头中的host为: localhost: 5000
        //changeOrigin设置为false时,服务器收到的请求头中的host为: localhost :8080
      }

changeOrigin一般都设置为false,因为服务器无论是否设置了某些不能请求其他端口的请求时,changeOrigin它也可以将自己变成所请求资源的服务器的相同用端口(简单来说就是,changeOrigin设置为false时,向哪台服务器发起请求,呈现的就是那台服务器的端口号)。

以上就是关于“Vue中插槽和配置代理如何使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


本文名称:Vue中插槽和配置代理如何使用
标题链接:http://scyanting.com/article/pdijed.html

其他资讯