vue Slot 배포 내용 인 스 턴 스 를 어떻게 사용 하 는 지 상세 하 게 설명 합 니 다.

2621 단어 vueSlot나 누 어 주다
vue 저 는 아직도 공부 중 입 니 다.오늘 은 Slot 로 내용 을 나 누 어 주 는 것 을 배 웠 고 자신 에 게 작은 필 기 를 남 겼 습 니 다.
slot 로 콘 텐 츠 를 나 눠 드 리 도록 하 겠 습 니 다.저희 가 2 가 지 를 주의해 야 돼 요.
구성 요 소 는 어떤 내용 을 받 을 지 모 릅 니 다.이것 은을 사용 하 는 부모 구성 요소 에 의 해 결 정 됩 니 다.
구성 요 소 는 자신의 템 플 릿 이 있 을 수 있 습 니 다.
구성 요 소 를 조합 할 수 있 도록 부모 구성 요소 의 내용 과 하위 구성 요소 의 템 플 릿 을 혼합 하 는 방법 이 필요 합 니 다.
[사례]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue-Slot     </title>
  <script type="text/javascript" src="js/vue.js"></script>
  <style>
    .sf{
      margin: 10px;
      width: 150px;
      border: 1px solid #ccc;
    }
    .sf-header,.sf-bottom{
      height: 30px;
      background: sandybrown;
    }
    .sf-body{
      min-height: 100px;
    }

  </style>
</head>
<body>
  <div id="app">
    <shoufa>
      <h2 slot="title">  vue</h2>
      <p>Vue.js（   /vjuː/，    view）                。
                    ，Vue              。
        Vue           ，       ，               </p>
      <h4 slot="bottom">vue   </h4>
    </shoufa>
  </div>
  <script type="text/x-template" id="sfTpl">
    <div class="sf">
      <div class="sf-header"><slot name="title"></slot></div>
      <div class="sf-body">
        <slot></slot>
      </div>
      <div class="sf-bottom"><slot name="bottom"></slot>
      </div>
    </div>
  </script>

  <script>
    var sf ={
      template:"#sfTpl",
    }
    var app = new Vue({
      el:"#app",
      components:{
        'shoufa':sf
      }
    })
  </script>
</body>
</html>
결 과 는 다음 과 같다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
웹 팩 구덩이 밟 는 길 그림 의 경로 와 포장
JavaSctit 은 FileReader 와 필 터 를 이용 하여 그림 미리 보기 기능 을 업로드 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage