Vue(九)http-proxy 跨域、插槽 slot

Vue(九)http-proxy 跨域、插槽 slotvue:http-proxy跨域,插槽以及插槽举例。

目录

一、http-proxy跨域

二、插槽(slot)


一、http-proxy跨域

        旧的跨域方式无论 CORS 还是 JSONP,都要求助于后端才能跨域,对于前端工程师来说都较为繁琐;而使用 vue 脚手架开发时,就可以用 http-proxy 跨域。

        http-proxy 跨域是一种纯前端跨域方式,请其他程序代替 ajax 发送请求。

使用方法:

(1)在脚手架根目录的 vue.config.js 文件中,再配置一个代理程序;

 module.exports={
    ... ...
    devServer: {
      proxy: {
        '/': {
          target: `http://服务器端接口地址统一前缀部分`,
          changeOrigin: true,
        }
      }
    }

(2)配置代理程序后,main.js中 就不用再配置 axios.defautls.baseURL 了;

(3)重启 npm run serve。

小结(高频笔试面试):

        跨域方式共有3种:corsjsonphttp 代理

        前端工程师最常用的方式:http 代理

        如果不用 ajax,还能怎么发请求:(1) jsonp 的 <script>;(2) Vue 脚手架的 http-proxy 代理方式跨域。

二、插槽(slot)

        在程序中有如多个提示框布局风格一致只是内部内容不同的情况,为了避免重复编写代码,就可以用到插槽。

        插槽就是组件中一块可动态改变 HTML 片段内容的区域,今后编程中如果有多个组件,拥有相同的结构框架,只是内部 HTML 片段有不同时就都应该使用插槽。

插槽的使用(以对话框举例来了解插槽的过程):点击按钮后页面分别弹出对应的对话框

Vue(九)http-proxy 跨域、插槽 slot

Vue(九)http-proxy 跨域、插槽 slot

Vue(九)http-proxy 跨域、插槽 slot

1. 先定义一个组件包含统一的外壳结构

        新建一个外壳组件,将任意一个现有对话框代码整体复制到组件中,删除组件中将来可能发生变化的大片 HTML 片段位 置,并用标签占位组件中个别可能变化的文本,改为绑定语法,并在 props 成员中添加外来属性。 

Vue(九)http-proxy 跨域、插槽 slot

2. 再在每次使用组件时,动态改变组件中插槽 区域的HTML片段内容

        2.1 在原对话框中引入带插槽的外壳组件

import Waike from "./Waike"
export default {
 … …,
 components:{ Waike },
 … …
}

Vue(九)http-proxy 跨域、插槽 slot

        2.2 在组件上添加外壳组件标签

Vue(九)http-proxy 跨域、插槽 slot

        2.3 在外壳组件内添加,其中添加对话框独有内容

Vue(九)http-proxy 跨域、插槽 slot

具名插槽:

        如果一个带插槽的外壳组件,将来有多个部位可能会改变,这个时候就用具名插槽。它可以将不同的 HTML 片段, 插入不同的插槽中。

        如果一个带插槽的外壳组件包含多个具名插槽,则使用时每个插槽对应的 HTML 片段,都要放在 <template v-slot:插槽名> 中,可简写为 <template #插槽名>

Vue(九)http-proxy 跨域、插槽 slot

Vue(九)http-proxy 跨域、插槽 slot

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10535.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注