Vue 어셈블리에서 여러 번 사용자 정의 매개변수 작업 재사용

장면:
프로젝트 중 여러 곳에 같은 모듈이 나타날 때 이때의 정상적인 고려는 이를 공공 구성으로 만들고 전참의 차이를 통해 여러 곳의 복용을 실현하는 것이다
구체적:
배경: 프로젝트에 사용되는 기술은 VUE+ElementUI
여기에서 여러 군데 나타나는 모듈은 select 선택 상자입니다. 구성 요소로 봉인된 후 옵션의 값을 전달합니다. 코드는 다음과 같습니다.

<!--    vSelect  -->
<template>
  <el-select
  @change="handleChange"
  v-model="value"
  :placeholder=" ">
    <el-option
    v-for="(item,index) in options"
    :key="index"
    :label="item.label"
    :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
 export default {
  data() {
    return {
      value: '',
    }
  },
  props:['options'],
  methods: {
    handleChange(value) {
      this.$emit('my-event',value);
    }
  },
  
 }
</script>

사용할 때 파일 import만 들어오면 코드는 다음과 같습니다.

<template>
  <vSelect :options="options" @my-event="select"></vSelect>
</template>
<script>
  import vSelect from ' '
  export default {
    data() {
      return {
        options: [
          {
            value:0,
            label:' '
          },
          {
            value:1,
            label:' '
          },
        ],
      }
    },
    components: {
      vSelect
    },
    methods: {
      select(value) {
        console.log(value)
      }
    },
  }
</script>

이상이면 하나의 구성 요소를 간단하게 호출할 수 있습니다. 선택한 값은 하위 구성 요소에서 부모 구성 요소로 전달됩니다.
질문:
여러 곳에서 같은 구성 요소를 사용할 때 서로 다른 옵션을 대표하고 얻은 값도 서로 다른 처리를 해야 한다. 정상적으로 여러 가지 방법을 써서 얻은 값에 대한 다른 처리를 실현할 수 있지만 이런 방법은 유연하지 않다.
해결:
이때 자연스럽게 떠오르는 해결 방법은 위의select 함수에 매개 변수를 하나 더 추가하고 매개 변수에 따라 다른 처리를 하는 것이다
하지만 막상 해보니 문제가 많다.
사실 해결 방법은 매우 간단하다. 처음에 방향을 바꾸지 않았는지, 아니면 시간이 좀 걸렸는지, 최종적인 해결 방안은 바로 리셋 함수를 사용하는 것이다.

<vSelect :options="options" @my-event="val=>select(val,param)"></vSelect>

select(value,param) {
  console.log(value,param)
}

돌이켜보면 정말 이게 문제라고 할 수 없어요. Vue 구성 요소로 사용되는 초급 강좌를 기록해 보세요. 누군가에게 도움이 됐으면 좋겠어요.
추가 정보: VUE 구성 요소(슬롯 slot 및 재사용 가능 구성 요소)
슬롯 슬롯
하위 구성 요소의 일부 내용이 부모 구성 요소를 통해 DOM을 전달할 때 부모 구성 요소props 전가의 비교적 좌절된 문법을 사용하지 않아도 된다. Vue에서 새로운 문법을 제공했다: 슬롯slot.
쓸데없는 말은 하지 말고 코드를 봐라.

<!-- html  -->
 <div id="app">
  <my-blog>
  <h2> </h2>
  <cite> </cite>
  <p> </p>
  </my-blog>
 </div>
// vue 
 Vue.component('my-blog',{
  template:`
  <div>
   <slot></slot>
   <span> </span>
  </div>`
 })
 var app=new Vue({
  el:"#app",
 })

이름 유래:
이 구문은 서브어셈블리로 DOM 내용을 직접 삽입하는 것처럼 보이기 때문에 슬롯이라고 합니다.
소결:
1. 슬롯(Slot)은 Vue가 제시한 개념이다. 이름과 같이 슬롯은 소지한 내용을 특정한 위치에 삽입하여 템플릿을 블록화하고 모듈화된 특징과 더 큰 중용성을 가지도록 결정한다.
2, 슬롯이 표시되지 않는지, 표시되는 방법은 상위 구성 요소에 의해 제어되고, 슬롯이 표시되는 곳은 하위 구성 요소에 의해 제어됩니다.
슬롯 분류는 여러 가지가 있는데, 이 절에서는 하나하나 소개할 것이다
(1) 단일 슬롯/기본 슬롯
(2) 구명 슬롯
(3) 역할 도메인 슬롯
(4) 구성 해제 슬롯
슬롯 분류 1: 단일 슬롯(타이어 슬롯)
발생 원인:
처음에 탭에 있는 모든 내용은 대체 내용으로 간주됩니다.
대체 컨텐트는 서브어셈블리의 역할 영역에서 컴파일되며 기본 요소가 비어 있고 삽입할 컨텐트가 없을 때만 표시됩니다.
슬롯 분류 1: 단일 슬롯(스페어)
(1) 숙주 원소가 비어 있지 않을 때, 숙주 원소의 내용을 표시하고, 예비 내용을 표시하지 않는다.

<!-- html  -->
 <div id="app">
  <my-blog></my-blog>
 </div>
// vue 
 Vue.component('my-blog',{
  template:`
  <div>
   <slot> </slot>
   <span> </span>
  </div>`
 })
 var app=new Vue({
  el:"#app",
 })

참고: 위에 컨텐트가 없는 경우 자동으로 기본 컨텐트가 채워집니다.
공식 설명서:
Vue는 배포 컨텐츠를 불러오는 출구로 요소를 제공하는 일련의 컨텐츠 배포 API 구현
슬롯에는 HTML 템플릿 코드와 다른 구성 요소를 포함한 모든 템플릿 코드가 포함될 수 있습니다.
통속적인 이해:
슬롯이 없는 상황에서 구성 요소 라벨에 내용을 쓰는 것은 아무런 작용도 하지 않는다. 구성 요소에 슬롯 요소를 성명한 후에 구성 요소 요소에 쓴 내용이 여기까지 온다. 즉, 슬롯은 이때 배달 내용을 싣는 출구로 충당한다.
서명 슬롯
먼저 사례를 살펴보고 사례를 결합하여 다음 구명 슬롯의 개념을 이해하다
(1) 하위 구성 요소에 세 개의 슬롯 탭을 정의했습니다. 그 중 두 개는name 속성 헤더와footer를 추가했습니다.slot에name 속성을 추가해서 현재 slot의 이름을 지정합니다

<!-- html  -->
 <div id="app">
  <my-blog>
  <h2 slot="header"> </h2>
  <cite> </cite>
  <p slot="footer"> </p>
  </my-blog>
 </div>
// vue 
 Vue.component('my-blog',{
  template:`
  <div>
   <slot name="header"></slot>
   <span> </span>
   <slot></slot>
   <slot name="footer"></slot>
  </div>`
 })
 var app=new Vue({
  el:"#app",
 })

구명 슬롯 소결
(1) 구명 슬롯은 부모 구성 요소에slot='사용자 정의 이름'의 속성을 추가하고 하위 구성 요소에name='사용자 정의 이름'을 추가하면 된다
(2) 부모 구성 요소 중 일부가slot 속성을 추가하지 않으면 여기가 기본 슬롯이고 하위 구성 요소에서 직접 사용하는 부모 구성 요소의 기본 슬롯 부분입니다.
(3) 기본 슬롯이 없으면 일치하는 내용을 찾을 수 없는 부분은 버려집니다.
역할 영역 슬롯 slot
소개:
역할 영역 슬롯은 Vue2.1.0 버전으로 추가되었습니다. 이것은 렌더링된 요소를 대체하기 위해 (데이터를 전달할 수 있는) 재사용 가능한 템플릿으로 사용되는 특수한 유형의 슬롯입니다.
부모 구성 요소 템플릿의 모든 것은 부모 역할 영역에서 컴파일됩니다.서브어셈블리 템플릿의 모든 항목은 하위 역할 영역에서 컴파일됩니다.
단, 우리는 부모 구성 요소에서slot-scope 특성을 사용하여 하위 구성 요소에서 데이터를 얻을 수 있습니다.전제 조건은 하위 구성 요소에서 사용해야 한다는 것이다. 데이터 = 데이터는 데이터의 데이터를 먼저 전달한다.
역할 도메인 슬롯 사례:

<!-- html  -->
 <div id="app">
  <!--  solt-scope  -->
  <my-blog>
  <template slot-scope="props">
   {{props.data}}
  </template>
  </my-blog>
 </div>
 // vue  
 // 1. 
 Vue.component('my-blog', {
  template: `<div>
  <slot :data="text"></slot>
  
  </div>`,
  data() {
  return {
   text: ' '
  }
  }
 })
 var app = new Vue({
  el: "#app",
 })

참고:
(1) 부모 단계에서 특수한 특성을 가진 slot-scope의 요소는 반드시 존재해야 한다. 이것은 작용역 슬롯의 템플릿임을 나타낸다. (2.5.0+에서 slot-scope는 임의의 요소나 구성 요소에 사용될 수 있고 더 이상 국한되지 않는다.)
(2)slot-scope의 값은 임시 변수 이름으로 사용됩니다. 이 변수는 하위 구성 요소에서 전달된prop 대상을 수신합니다
(3) 하위 구성 요소에서 플러그인에 데이터를 전달하면 프로파일을 구성 요소에 전달하듯이 다음 부모 구성 요소에서slot-scope 기능을 사용하여 하위 구성 요소에서 데이터를 가져옵니다.
사례: 블로그 하위 구성 요소는 여러 곳에서 호출될 수 있습니다. 다른 곳에서 블로그 구성 요소를 호출하기를 원할 때
그러나: 목록의 순환과 스타일은 하위 구성 요소에 의해 결정되는 것이 아니라 외부에 의해 결정되는 것을 주의하십시오. 수정 코드는 다음과 같습니다.

<!-- html  -->
 <div id="app">
  <!--  solt-scope  -->
  <my-blog>
  <template slot-scope="props">
   <h1>{{props.data}}</h1>
  </template>
  </my-blog>
  <my-blog>
  <template slot-scope="props">
   <h4>{{props.data}}</h4>
  </template>
  </my-blog>
 </div>
// vue  
 // 1. 
 Vue.component('my-blog', {
  template: `
  <div>
  <ul>
   <li v-for="text of texts">
   <slot :data="text"></slot>
   </li>
  </ul>
  </div>`,
  data() {
  return {
   texts: [" "," "," "," "," "," "]
  }
  }
 })
 var app = new Vue({
  el: "#app",
 })

조건 판단 렌더링
지금까지는 원소에서 마음대로 조작할 수 있었다
예를 들어 이름의 길이가 3일 때 앞에 "안녕하세요"표시를 붙인다
코드는 다음과 같습니다.

<!-- html  -->
 <div id="app">
  <!--  solt-scope  -->
  <my-blog>
  <template slot-scope="props">
   <h1 v-if="props.data.length==3"> --{{props.data}}</h1>
   <h1 v-else>{{props.data}}</h1>
  </template>
  </my-blog>
  
 </div>
 // vue  
 // 1. 
 Vue.component('my-blog', {
  template: `
  <div>
  <ul>
   <li v-for="text of texts">
   <slot :data="text"></slot>
   </li>
  </ul>
  </div>`,
  data() {
  return {
   texts: [" "," "," "," "," "," "]
  }
  }
 })
 var app = new Vue({
  el: "#app",
 })

역할 영역 슬롯 slot-scrop 새 문법
버전: 2.6.0부터 업데이트되었습니다.slot-scope 문법을 사용하지 않고 v-slot로 대체하기 시작했습니다. 아래와 같습니다.

<!-- html  -->
 <div id="app">
  <!--  solt-scope  -->
  <my-blog>
  <template v-slot="props">
   <h1 v-if="props.data.length==3"> --{{props.data}}</h1>
   <h1 v-else>{{props.data}}</h1>
  </template>
  </my-blog>
  
 </div>

구성 해제 슬롯:
v-slot의 값은 사실상 함수 정의의 매개 변수로 사용할 수 있는 모든 JS 표현식일 수 있다.따라서 지원되는 환경 (단일 파일 구성 요소나 현대 브라우저) 에서 ES2015 디버그를 사용하여 구체적인 슬롯 프로필을 전송할 수 있습니다. 다음과 같습니다.

<!-- html  -->
 <div id="app">
  <!--  solt-scope  -->
  <my-blog>
  <template v-slot="{data}">
   <h1 v-if="data.length==3"> --{{data}}</h1>
   <h1 v-else>{{data}}</h1>
  </template>
  </my-blog>
 </div>
// vue  
 // 1. 
 Vue.component('my-blog', {
  template: `
  <div>
  <ul>
   <li v-for="text of texts">
   <slot :data="text"></slot>
   </li>
  </ul>
  </div>`,
  data() {
  return {
   texts: [" "," "," "," "," "," "]
  }
  }
 })
 var app = new Vue({
  el: "#app",
 })

역할 영역 슬롯 slot-scrop 새 문법
슬롯 프로가 undefined인 경우 백업 내용을 정의할 수 있습니다

<!-- html  -->
 <div id="app">
  <!--  solt-scope  -->
  <my-blog>
  <template v-slot="{data=' '}">
   <h1 v-if="data.length==3"> --{{data}}</h1>
   <h1 v-else>{{data}}</h1>
  </template>
  </my-blog>
 </div>
// vue  
 // 1. 
 Vue.component('my-blog', {
  template: `
  <div>
  <ul>
   <li v-for="text of texts">
   <slot :data="text"></slot>
   </li>
  </ul>
  </div>`,
  data() {
  return {
   texts: [" "," "," "," ",undefined," "]
  }
  }
 })
 var app = new Vue({
  el: "#app",
 })

재사용 가능한 구성 요소 고려 사항 작성:
구성 요소를 작성할 때, 이후에 복용해야 할지 여부를 잘 고려하는 것이 가장 좋다.일회용 구성 요소 간의 긴밀한 결합은 상관없지만, 복용 가능한 구성 요소는 명확한 공개 인터페이스를 정의해야 하며, 사용한 외부 데이터에 대해 어떠한 가설도 하지 말아야 한다.
Vue 구성 요소의 API는 prop, 이벤트 및 슬롯의 세 가지 섹션에서 제공됩니다.
1. Prop는 외부 환경이 구성 요소에 데이터를 전달할 수 있도록 허용한다.
2. 이벤트는 구성 요소 내에서 외부 환경의 부작용을 촉발할 수 있다.
3, 슬롯은 외부 환경에서 추가 내용을 구성 요소에 조합할 수 있도록 합니다.이상의 이 Vue 구성 요소는 여러 번 사용자 정의 매개 변수를 복용하여 조작하는 것이 바로 여러분에게 공유된 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.