집 > 기사 > 웹 프론트엔드 > Vue에서 슬롯 배포 시 콘텐츠를 재사용하는 편리한 단계에 대한 자세한 설명

Vue에서 슬롯 배포 시 콘텐츠를 재사용하는 편리한 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-14 14:19:341347검색

이번에는 Vue에서 슬롯 슬롯으로 배포된 상위 컴포넌트의 콘텐츠를 쉽게 재사용할 수 있는 단계에 대해 자세히 설명하겠습니다. 상위 슬롯 배포로 쉽게 재사용할 수 있는 노트는 무엇인가요? 다음은 Vue의 실제 사례입니다.

Written before

저는 이전에 대화 상자 구성 요소를 구현하는 Vue에 대한 기사를 작성했습니다. http://www.jb51.net/article/139218.htm

Vue 대화 상자 구성 요소를 구현하는 방법에 대해 이야기합니다. 이는 상위 구성 요소와 하위 구성 요소 간의 통신을 포함합니다. 말할 필요도 없이 이는 이전 기사를 읽으면 이해할 수 있습니다. 기사 끝 부분에서 언급했듯이 슬롯 슬롯을 사용하여 구성 요소를 작성할 수 있으며 슬롯은 콘텐츠를 배포하는 데 사용됩니다. 이를 통해 구성 요소의 재사용률이 높아지고 작성된 구성 요소가 더욱 유연해집니다.

대화 상자의 예를 사용하여 슬롯을 사용하여 대화 상자 구성 요소를 구현합니다.

dialog-tip이라는 전역 구성 요소를 등록합니다.

 Vue.component('dialog-tip', {
   template: '#dialog-tip',
   props:['dialogShow','message'],
   data:function(){
    return {
     content:''
    }
   },
   methods:{
   }
  });

템플릿 태그를 사용하여 이 구성 요소를 정의합니다.

<template id="dialog-tip">
  <p class="dialog_tip" v-if="dialogShow">
   <p class="dialog_tip--mask"></p>
   <p class="dialog_tip--content">
    <p class="dialog_tip--contenttxt">
     <slot name="msg">请输入1-8000之间任意整数</slot>
    </p>
    <p class="dialog_tip--contentbtns">
     <slot>
      <button class="btn">确定</button>
      <button class="btn">重新输入</button>
      <button class="btn">去注册</button>
     </slot>
    </p>
   </p>
  </p>
 </template>
<template id="dialog-tip">
  <p class="dialog_tip" v-if="dialogShow">
   <p class="dialog_tip--mask"></p>
   <p class="dialog_tip--content">
    <p class="dialog_tip--contenttxt">
     <slot name="msg">请输入1-8000之间任意整数</slot>
    </p>
    <p class="dialog_tip--contentbtns">
     <slot>
      <button class="btn">确定</button>
      <button class="btn">重新输入</button>
      <button class="btn">去注册</button>
     </slot>
    </p>
   </p>
  </p>
 </template>

구성 요소 콘텐츠에는 두 부분이 포함됩니다. 프롬프트 콘텐츠 중 하나는 버튼 버튼입니다. 슬롯을 사용하여 수정 및 교체할 콘텐츠를 포함합니다.
그러면 상위 구성 요소가 하위 구성 요소에 콘텐츠를 배포할 수 있습니다.

<p class="dialog_tip--contenttxt">
     <slot name="msg">请输入1-8000之间任意整数</slot>
    </p>
    <p class="dialog_tip--contentbtns">
     <slot>
      <button class="btn">确定</button>
      <button class="btn">重新输入</button>
      <button class="btn">去注册</button>
     </slot>
    </p>

기본 슬롯 외에도 이름이 지정된 슬롯을 정의할 수도 있습니다. 교체해야 할 구성 요소 부분이 여러 개인 경우 해당 이름을 정의할 수 있습니다. 예:

<slot name="msg"&gt ;1-8000 사이의 정수를 입력하세요</slot><slot name="msg">请输入1-8000之间任意整数</slot>

这样在使用组件的时候，指定slot的name ，就会将这一部分内容替换掉，而不会替换其他的插槽内容

<p slot="msg">请输入正确手机号</p>

이런 식으로 구성 요소를 사용할 때 슬롯 이름을 지정하면 콘텐츠의 이 부분이 대체됩니다. 그 외 슬롯은 교체되지 않습니다. 슬롯 이름을 지정하지 않으면 기본 대화 상자인 -tip 태그의 콘텐츠가 슬롯을 사용하여 하위 구성 요소에 포함된 콘텐츠 부분을 대체합니다. 예를 들어 위의

에서는 슬롯을 사용하여 이름을 지정합니다. 하위 구성 요소의 해당 슬롯 부분과 이름을 지정하기 위해 슬롯을 사용하지 않는 콘텐츠는 기본적으로 명명된 슬롯을 정의하지 않는 하위 구성 요소의 일부를 교체합니다.

배포해야 할 콘텐츠가 대화 상자 팁 태그에 정의되어 있지 않으면 기본 슬롯 콘텐츠가 하위 구성 요소에 표시됩니다.

더 많은 슬롯 사용을 보려면

https로 이동하세요: //

cn .vuejs.org/v2/guide/comComponents-slots.html

FinalRendering

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 콘텐츠를 확인하세요. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!