Vue 구성 요소에서 슬롯 소켓 사용에 대한 자세한 설명

이번에는 Vue 컴포넌트에서 슬롯 소켓을 사용하는 방법에 대해 자세히 설명하겠습니다. Vue 컴포넌트에서 슬롯 소켓을 사용할 때 주의 사항은 무엇입니까?

자식 컴포넌트

<template>
  <p>
    </p>
<ul>
      <!--<slot></slot>-->
      <li>{{item.text}}</li>
    </ul>
  
</template>
<script>
  export default{
    data(){
      return{
        items:[
          {id:1,text:&#39;第1段&#39;},
          {id:2,text:&#39;第2段&#39;},
          {id:3,text:&#39;第3段&#39;},
        ]
      }
    }
  }
</script>
<style>
</style>

　부모 컴포넌트

<template>
  <p>
    </p>
<h2 id="首页">首页</h2>
    <router-link>跳转到详情</router-link>
    <p>父组件</p>
    <slotshow>
      <p>{{msg}}</p>
    </slotshow>
  
</template>
<script>
  import slotshow from &#39;../components/slotshow&#39;
  export default{
    data(){
      return{
        msg:"测试内容"
      }
    },
    components:{
      slotshow
    }
  }
</script>
<style>
</style>

　이 상황은 부모 컴포넌트가 자식 컴포넌트에 콘텐츠를 삽입하려면 자식 컴포넌트에 슬롯 태그를 선언해야 합니다. 하위 구성 요소 템플릿에 소켓이 포함되어 있지 않으면 상위 구성 요소 <p>{{msg}}</p>의 콘텐츠가 삭제됩니다. <p>{{msg}}</p>将会被丢弃。

 当slot存在默认值

默认值

，且父元素在<slotshow></slotshow>

슬롯에 기본값

기본값

이 있고 상위 요소가 <slotshow></slotshow>에 없는 경우 삽입할 콘텐츠가 있는 경우

기본값

이 표시됩니다(p 태그는 제거됨). 슬롯에 기본값이 있고 상위 요소에 에 삽입할 콘텐츠가 있는 경우 ;, 상위 구성요소에 설정된 값, 즉

요소는 콘텐츠 배포 방법을 구성하기 위해 특별한 attribute

이름으로 구성될 수 있습니다. 여러 슬롯은 서로 다른 이름을 가질 수 있습니다. 명명된 슬롯은 콘텐츠 조각의 해당 슬롯 속성과 요소를 일치시킵니다.

var childNode = {
 template: `
 <p>
 </p><p>子组件</p>
 <slot>头部默认值</slot>
 <slot>主体默认值</slot>
 <slot>尾部默认值</slot>
 
 `,
};
var parentNode = {
 template: `
 <p>
 </p><p>父组件</p>
 <child>
 <p>我是头部</p>
 <p>我是尾部</p>
 </child>
 
 `,
 components: {
 'child': childNode
 },
};

익명 슬롯은 여전히 ​​가질 수 있습니다. 익명 슬롯은 기본 슬롯이며 일치하는 콘텐츠 조각이 없는 경우 대체 슬롯 역할을 합니다. 익명 슬롯은 슬롯 속성이 없는 요소의 슬롯으로만 사용할 수 있습니다. 슬롯 속성이 있는 요소는 슬롯이 구성되지 않은 경우 삭제됩니다.

var childNode = {
 template: `
 <p>
 </p><p>子组件</p>
 <slot>主体默认值</slot>
 <slot></slot>
 
 `,
};
var parentNode = {
 template: `
 <p>
 </p><p>父组件</p>
 <child>
 <p>我是主体</p>
 <p>我是其他内容</p>
 <p>我是尾部</p>
 </child>
 
 `,
 components: {
 'child': childNode
 },
};
<p>插入<slot>中，<p>我是其他内容</p>插入<slot>中，而<p>被丢弃</p></slot></slot></p>

기본 슬롯이 없으면 찾을 수 없는 이러한 콘텐츠 조각도 더 이상 사용되지 않습니다.

var childNode = {
 template: `
 <p>
 </p><p>子组件</p>
 <slot>主体默认值</slot>
 
 `,
};
var parentNode = {
 template: `
 <p>
 </p><p>父组件</p>
 <child>
 <p>我是主体</p>
 <p>我是其他内容</p>
 <p>我是尾部</p>
 </child>
 
 `,
 components: {
 'child': childNode
 },
};
<p>我是其他内容</p>和<p>都被抛弃</p>

스코프 슬롯

스코프 슬롯은 렌더링된 요소를 데이터를 전달할 수 있는 재사용 가능한 템플릿으로 교체하는 데 사용되는 특별한 유형의 슬롯입니다.

하위 구성 요소에서는 구성 요소에 props를 전달하는 것처럼 슬롯에 데이터를 전달하기만 하면 됩니다.

<span><p>
 <slot></slot>
</p></span>

상위 구성 요소에는 특수 속성 범위가 있는

위 내용은 Vue 구성 요소에서 슬롯 소켓 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!