Vue의 슬롯 및 구성 에이전트 사용에 대한 간략한 분석

Vue에서 슬롯을 사용하고 프록시를 정확하고 빠르게 구성하는 방법은 무엇입니까? 다음 글에서는 Vue에서 슬롯을 사용하고 에이전트를 구성하는 방법을 소개하겠습니다. 도움이 되길 바랍니다!

1. 슬롯

1. 슬롯이란 무엇입니까

상위 구성 요소가 하위 구성 요소의 지정된 위치에 html 구조를 삽입할 수 있는 통신 방법이기도 합니다. 구성 요소 간, 상위 구성 요소 ->하위 구성 요소에 적용 가능합니다. 슬롯에는 기본 슬롯, 이름이 지정된 슬롯, 스코프 슬롯이라는 세 가지 유형이 있습니다. 다음은 이 세 가지 슬롯

1.1기본 슬롯을 사용하는 방법입니다.

기본 슬롯이란 무엇인가요? 실제로 기본 슬롯은 새 집을 구입한 다음 모든 방을 장식했지만 아직 장식하지 않은 방이 하나 있는 것과 같습니다. 왜냐하면 e 세트를 설치할지 여부를 모르기 때문입니다. -그 안에는 운동용품이나 책장을 먼저 두고 그 방에 좋은 자리를 남겨두고 쇼핑몰에 와서 마음에 드는 책장을 보고 판매원에게 '내가 이걸 샀다'고 말한 뒤 빈 곳에 책장을 놔두세요. 슬롯의 경우에도 마찬가지입니다. 하위 구성요소는 빈 방과 같으며 상위 구성요소는 즐겨찾는 책장과 같습니다(하위 구성요소에서 슬롯을 정의하고 데이터를 기록하는 것을 기억하세요). 상위 구성 요소> 그게 전부입니다) [관련 권장 사항: vuejs 비디오 튜토리얼, 웹 프런트 엔드 개발]

하위 구성 요소에 슬롯 정의

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

데이터 채우기

 <Category title="美食">
      <img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  slot  alt>
 </Category>

1.2 명명된 슬롯

간단히 하위 구성 요소에 이름을 지정하세요. 슬롯에는 기본 슬롯보다 이름 속성이 하나 더 있습니다. 상위 구성 요소에는 슬롯 = "명명된 슬롯 이름"이라는 추가 코드 줄이 있습니다. 명명된 슬롯은 데이터의 위치를 ​​더 잘 제어할 수 있습니다

상위 구성 요소 가운데 및 바닥글 슬롯 사용

      <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>

하위 구성 요소 내의 가운데 및 바닥글 명명된 슬롯 정의

 <template>
      <div class="category">
        <h3 id="title">{{title}}</h3>
        <!-- 具名插槽 -->
        <slot name = "center">我是具名插槽center</slot>
        <slot name = "footer">我是具名插槽footer</slot>
        <img src="/static/imghwm/default1.png"  data-src="" alt="  class="lazy"   alt="">
      </div>
 </template>

1.3 범위 슬롯

이해

: 데이터 컴포넌트 자체에 있지만 데이터를 기반으로 생성된 구조가 필요한지 여부는 컴포넌트 사용자가 결정합니다. (게임 데이터는 Category 컴포넌트에 있지만, 데이터를 사용하여 탐색하는 구조는 App 컴포넌트에 의해 결정됩니다.)

Parent 컴포넌트

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

Child 컴포넌트

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

둘째, 프록시를 구성합니다

Method 1: In vue .config.js

    devServer:{

        proxy: "http://localhost:5000"

    }

에 다음 구성을 추가합니다. 참고:

장점: 구성이 간단하고 포트 8080

에 직접 요청을 보낼 수 있습니다.단점: 여러 프록시를 구성할 수 없으며 유연하지 않음(리소스가 있지만 요청해야 하는 경우 프런트 엔드가 아닌 리소스의 경우 기존 리소스만 사용할 수 있음)

프록시 프로세스: 요청 보내기 프런트 엔드에 프록시를 켜시겠습니까? 요청할 리소스가 없으면

방법 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에 추가합니다. 다른 포트를 요청할 수 없는 특정 요청을 설정하면, ChangeOrigin은 요청된 리소스에 대해 서버의 동일한 포트로 자체적으로 변경할 수도 있습니다. 표시됩니다)

(학습 영상 공유:

vuejs 입문 튜토리얼

, 기본 프로그래밍 영상)

위 내용은 Vue의 슬롯 및 구성 에이전트 사용에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!