vue——代理、插槽

最新推荐文章于 2023-07-26 14:16:23 发布

h_jQuery

最新推荐文章于 2023-07-26 14:16:23 发布

阅读量263

点赞数

分类专栏： javascript es6 Vue 文章标签： vue.js react.js javascript 代理模式插槽

本文链接：https://blog.csdn.net/h_jQuery/article/details/120002263

版权

javascript 同时被 3 个专栏收录

123 篇文章 0 订阅

订阅专栏

Vue

86 篇文章 0 订阅

订阅专栏

es6

73 篇文章 0 订阅

订阅专栏

配置代理

1.xhr：new XMLHttpRequest()——xhr.open()配置请求信息、xhr.send()发送请求信息

2.Jquey： $. g e t 、$ .post

3.axios：通用的ajax请求库，官方推荐，使用广泛

4.fetch

5.vue-resource：vue插件库，vue1.0使用广泛，官方已不维护

response.setHeader(‘Access-Control-Allow-Origin’,’*)

设置代理方法一：

在vue.config.js中添加以下配置：

devServer:{
	//proxy里面配置服务器地址
	proxy:"http://localhost:xxxx"
}

说明：

1.优点：配置简单，请求资源直接发给前端(8080)即可

2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理

3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会自动转发给服务器（优先匹配前端资源）

设置代理方法二：

编写vue.config.js配置具体代理规则：

module.exports = {
    // 开启代理服务器方式二：
    devServer: {
        proxy: {
            //匹配所有以'/api'开头的请求路径
            '/api': {
                //代理目标的基础路径
                target: 'http://localhost:xxxx',
                // 重写路径：匹配以/api开头的路径，将/api转换成一个空字符串
                // 例如：代理服务器拿到请求地址(/api/school)之后,转发给服务器的是/school
                changeOrigin: true,
                pathRewrite: { '^/api': '' }
            },
            '/demo': {
                tartget: '服务器地址',
                pathRewrite: { '^/demo': '' },
                // 支持websocket
                // ws: true,
                // 用于控制请求头中的host值
                // changeOrigin: false
            }
        }
    }
}

changeOrigin为true时，服务器收到的请求头中的host是该服务器的（localhost:xxxx）

changeOrigin为false时，服务器收到的请求头中的host是前端的服务器（localhost:8080）

在vue中changeOrigin默认为true，react中默认是false

说明：

1.优点：可以配置多个代理，且可以灵活的控制请求是否走代理

2.缺点：配置略微繁琐，请求资源时必须加前缀

插槽

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件。

2.分类：默认插槽、具名插槽、作用域插槽

3.使用方式：

3.1默认插槽：

父组件:
	<template>
		<Category>
			<div>html结构</div>
		</Category>
	</template>
子组件：
	<template>
		<div>
			//定义插槽
			<slot>插槽默认内容</slot>
		</div>
	</template>

·3.2具名插槽

父组件:
	<template>
		<Category>
			<template slot='center'>
				<div>
					html结构
				</div>
			</template>
			<template slot='footer'>
				<div>
					html结构
				</div>
			</template>
		</Category>
	</template>
子组件：
	<template>
		<div>
			//定义插槽
			<slot name='center'>插槽默认内容</slot>
			<slot name='footer'>插槽默认内容</slot>
		</div>
	</template>

3.3作用域插槽

3.3.1理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定

3.3.2具体编码

父组件:
	<template>
		<Category>
			<template scope='scopeData'>
				<ul>
					<li v-for="(item,index) in scopeData.users" :key="index">{{item}}</li>
				</ul>
			</template>
		</Category>
	</template>
子组件：
	<template>
			<slot :users="games">插槽默认内容</slot>
	</template>
	<script>
export default {
  data() {
    return {
      games: ["王者荣耀", "梦想城镇", "食物语", "暖暖", "恋与制作人"],
    };
  },
};
</script>

案例代码：

默认插槽：

子组件：

<template>
  <div class="category">
    <h3>{{ title }}</h3>
    <!-- 默认插槽：给自定义组件标签内的标签填充使用 -->
    <slot>
      <!-- 这里面可以设置默认值，当使用者没有传递具体结构时，就会显示默认值 -->
    </slot>
    <!-- <ul>
      <li v-for="(item, index) in listData" :key="index">{{ item }}</li>
    </ul> -->
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["listData", "title"],
};
</script>

<style scoped>
.category {
  width: 200px;
  height: 300px;
  background: skyblue;
}
h3 {
  text-align: center;
}
ul li {
  list-style: none;
  padding: 10px;
}
</style>>

父组件：

<template>
  <!-- 先在App里面解析好，再传给category组件 -->
  <div class="container">
    <Category title="美食" :listData="foods">
      <img src="./assets/image/pic01.jpg" alt="" />
    </Category>
    <Category title="游戏" :listData="games">
      <ul>
        <li v-for="(item, index) in games" :key="index">{{ item }}</li>
      </ul>
    </Category>
    <Category title="电影" :listData="films"></Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
  name: "App",
  components: {
    Category,
  },
  data() {
    return {
      foods: ["羊肉", "鸭肉", "鸡肉", "牛肉", "猪肉"],
      games: ["王者荣耀", "梦想城镇", "食物语", "暖暖", "恋与制作人"],
      films: ["加勒比海盗", "变形金刚", "哥斯拉大战金刚", "金刚骷髅岛", "金刚"],
    };
  },
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: space-around;
}
img {
  width: 200px;
}
</style>

具名插槽：

子组件：

<template>
  <div class="category">
    <h3>{{ title }}</h3>
    <slot name="center"></slot>
    <slot name="more"></slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["listData", "title"],
};
</script>

<style scoped>
.category {
  width: 200px;
  height: 300px;
  background: skyblue;
}
h3 {
  text-align: center;
}
</style>>

父组件：

<template>
  <!-- 先在App里面解析好，再传给category组件 -->
  <div class="container">
    <Category title="美食" :listData="foods">
      <img slot="center" src="./assets/image/pic01.jpg" alt="" />
      <a slot="more" href="https://www.baidu.com">更多美食</a>
    </Category>
    <Category title="游戏" :listData="games">
      <ul slot="center">
        <li v-for="(item, index) in games" :key="index">{{ item }}</li>
      </ul>
      <div slot="more" class="gameCss">
        <a href="https://www.baidu.com">单机游戏</a>
        <a href="https://www.baidu.com">网络游戏</a>
      </div>
    </Category>
    <Category title="电影" :listData="films">
      <ul slot="center">
        <li v-for="(item, index) in films" :key="index">{{ item }}</li>
      </ul>
      <!-- v-slot:xxx这种写法只有在template标签中可用 -->
      <template v-slot:more>
        <div class="gameCss">
          <a href="https://www.baidu.com">经典</a>
          <a href="https://www.baidu.com">热门</a>
          <a href="https://www.baidu.com">推荐</a>
        </div>
        <h4>欢迎前来观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
  name: "App",
  components: {
    Category,
  },
  data() {
    return {
      foods: ["羊肉", "鸭肉", "鸡肉", "牛肉", "猪肉"],
      games: ["王者荣耀", "梦想城镇", "食物语", "暖暖", "恋与制作人"],
      films: ["加勒比海盗", "变形金刚", "哥斯拉大战金刚", "金刚骷髅岛", "金刚"],
    };
  },
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.container ul {
  padding: 0;
}
.container ul li {
  list-style: none;
}
img {
  width: 200px;
}
.gameCss {
  display: flex;
  justify-content: space-around;
}
</style>

作用域插槽：

子组件：

<template>
  <div class="category">
    <h3>{{ title }}</h3>
    <!-- <ul>
      <li v-for="(item, index) in games" :key="index">{{ item }}</li>
    </ul> -->
    <!-- 数据是在插槽定义的这个组件里面的，但是用数据生成的结构是这个插槽的使用者决定的 -->
    <!-- 作用域插槽可以和具名插槽配合 -->
    <slot :games="games" msg="hello" name="center"> </slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["title"],
  data() {
    return {
      games: ["王者荣耀", "梦想城镇", "食物语", "暖暖", "恋与制作人"],
    };
  },
};
</script>

<style scoped>
.category {
  width: 200px;
  height: 300px;
  background: skyblue;
}
.container ul {
  padding: 0;
}
.container ul li {
  list-style: none;
}
h3 {
  text-align: center;
}
</style>>

父组件：

<template>
  <!-- 先在App里面解析好，再传给category组件 -->
  <div class="container">
    <Category title="游戏">
      <!-- scope属性值是自定义的，是一个对象 -->
      <template scope="game" slot="center">
        <ul>
          <!-- game.games：game是scope属性的属性值，games是Category组件中的slot标签的自定义属性 -->
          <li v-for="(item, index) in game.games" :key="index">{{ item }}</li>
        </ul>
      </template>
    </Category>
    <Category title="游戏">
      <!-- ES6的解构，就可以不用对象名.属性名的获取数据了 -->
      <template scope="{games}">
        <ol>
          <!-- game.games：game是scope属性的属性值，games是Category组件的自定义属性 -->
          <li v-for="(item, index) in games" :key="index">{{ item }}</li>
        </ol>
      </template>
    </Category>
    <Category title="游戏">
      <template slot-scope="{ games }">
        <h4 v-for="(item, index) in games" :key="index">{{ item }}</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
  name: "App",
  components: {
    Category,
  },
  data() {
    return {};
  },
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

img {
  width: 200px;
}
.gameCss {
  display: flex;
  justify-content: space-around;
}
</style>

h_jQuery

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue——代理、插槽

配置代理1.xhr：new XMLHttpRequest()——xhr.open()配置请求信息、xhr.send()发送请求信息2.Jquey：.get、.get、.get、.post3.axios：通用的ajax请求库，官方推荐，使用广泛4.fetch5.vue-resource：vue插件库，vue1.0使用广泛，官方已不维护response.setHeader(‘Access-Control-Allow-Origin’,’*)设置代理方法一：在vue.config.js中添加以下配置
复制链接

扫一扫