A brief analysis of the use of slots and configuration agents in Vue

How to use slots and configure agents in Vue correctly and quickly? The following article will introduce to you how to use slots and configure agents in Vue. I hope it will be helpful to you!

1. Slot

1. What is a slot

Allows the parent component to insert the HTML structure into the specified location of the child component. It is also a method of inter-component communication, applicable to parent components -> child components. There are three types of slots, namely Default Slot, Named Slot, Scope Slot. How to use them is listed below. These three slots

1.1 Default slot

What is the default slot? In fact, the default slot is equivalent to you buying a new house, and then all the rooms have been decorated, but you still have one room that has not yet been decorated, because you don’t know whether to install a set of e-sports equipment or a bookcase in it. So first leave a good place in that room. Then you come to the mall and see the bookcase you like. Then you tell the salesperson, I bought this, and then put the bookcase in the vacant room and plug it in. The same is true for slots. Child components are like empty rooms, and parent components are like favorite bookcases (remember <define slots in child components, write data in parent components> That’s it) [Related recommendations: vuejs video tutorial, web front-end development】

Defining a slot in the subcomponent ##

<template>
  <div class="category">
    <h3>{{title}}</h3>
    <!-- 定义一个插槽（等待组件的使用者进行填充） -->
    <slot>我是默认插槽，在没有传结构式我才会显示该片段文字</slot>
  </div>
</template>

Parent componentFill data inside

 <Category title="美食">
      <img slot src="./assets/logo.png" alt>
 </Category>

1.2 Named slot

Simply put, named slot in child component There is one more name attribute than the default slot, and there is an additional line of code slot = "named slot name" in the parent component. Named slots can better control the location of the data to be placed

Parent componentUse center and footer slots

      <Category title="游戏">
          <ul slot="center">// 使用center具名插槽
            <li v-for="(g,index) in games" :key="index">{{g}}</li>
          </ul>
          <div class="foot" slot="footer">// 使用footer具名插槽
            <a href="javascript:;">植物大战讲师</a>
            <a href="javascript:;">冰火人闯森林</a>
          </div>
      </Category>

SubcomponentDefine conter and footer named slots inside

 <template>
      <div class="category">
        <h3>{{title}}</h3>
        <!-- 具名插槽 -->
        <slot name = "center">我是具名插槽center</slot>
        <slot name = "footer">我是具名插槽footer</slot>
        <img src="" alt="">
      </div>
 </template>

1.3 Scope slot

Understanding: The data is in the component itself, but the structure generated based on the data needs to be decided by the user of the component. (The games data is in the Category component, but the structure traversed using the data is determined by the App component)

Parent component

    <Category title="游戏">
      <template slot-scope="{games}">
        <h4>
          <li v-for="(g,index) in games" :key="index">{{g}}</li>
        </h4>
      </template>
    </Category>

Child component

<template>
  <div class="category">
    <h3>{{title}}</h3>
    <slot :games="games">我是作用域插槽，在没有传结构式我才会显示该片段文字</slot>
  </div>
</template>
<script>
export default {
  name: "Category",
  props: ["title"],
  data() {
    return {
      games: ["红警", "绿警", "蓝警", "紫警"]
    };
  }
};
</script>

Second, configure the proxy

Method 1: Add the following configuration in vue.config.js

    devServer:{

        proxy: "http://localhost:5000"

    }

Note:

Advantages: The configuration is simple and you can directly send a request to port 8080

Disadvantages: You cannot configure multiple proxies and it is inflexible (if you have resources but need to request non-front-end resources, you can only Use your own existing resources)

Agent process: Send a request? Turn on the proxy? If there are resources on the front end, use them. If there are no resources, request them

##Method 2: Add the following configuration in 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 is generally set to false, because regardless of whether the server has set certain requests that cannot request other ports, changeOrigin can also be set to false. It becomes the same port of the server for the requested resource (in simple terms, when changeOrigin is set to false, which server is requested, the port number of that server is displayed)

(Learning video Share:

vuejs introductory tutorial

, Basic programming video)

The above is the detailed content of A brief analysis of the use of slots and configuration agents in Vue. For more information, please follow other related articles on the PHP Chinese website!