>  기사  >  웹 프론트엔드  >  하위 구성 요소의 상위 구성 요소가 전달한 템플릿을 표시하기 위해 vue에서 슬롯을 구현하는 방법(자세한 자습서)

하위 구성 요소의 상위 구성 요소가 전달한 템플릿을 표시하기 위해 vue에서 슬롯을 구현하는 방법(자세한 자습서)

亚连
亚连원래의
2018-06-02 09:18:322496검색

이 글에서는 주로 자식 컴포넌트에 부모 컴포넌트가 전달한 템플릿을 표시하는 vue 슬롯을 소개합니다. 필요한 친구는 참고하면 됩니다.

부모 컴포넌트는 슬롯 속성을 지정하지 않으며 기본값은 default

할 수 있습니다. 상위 구성 요소가 해당 슬롯을 통과하지 않으면 기본값이 표시됩니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="vue.js" charset="utf-8"></script>
</head>
<body>
  <p id="app">
    <modal>
      <!-- 调用父组件的方法 -->
      <h1 @click=&#39;click&#39;>aaa</h1></modal>
    <modal>
      <h2>bbb</h2></modal>
    <modal>
      <!-- 使用slot设置模板中的名字,会插入到指定的slot中 -->
      <p slot=&#39;title&#39;>hello</p>
      <p slot=&#39;content&#39;>
        world
      </p>
    </modal>
    <modal></modal>
  </p>
  <template id="modal">
    <!-- 使用slot在子组件中显示父组件传过来的模板 -->
      <p>
        modal
        <slot name=&#39;default&#39;>如果没有会使用这个默认值</slot>
      <h1>
        title:
        <slot name=&#39;title&#39;>
        </slot>
      </h1>
      content:
      <slot name=&#39;content&#39;></slot>
      </p>
    </template>
  <script type="text/javascript">
    let modal = {
      template: &#39;#modal&#39;
    }
    new Vue({
      el: &#39;#app&#39;,
      components: {
        // es 简写 ,只写一个的意思为
        // modal:modal
        modal
      },
      methods: {
        click() {
          console.log(&#39;aaa&#39;)
        }
      }
    })
  </script>
</body>
</html>

위 내용은 모두에게 도움이 되기를 바랍니다. 미래.

관련 기사:

JS 형식에서 값 전송 및 URL 인코딩 변환을 구현하는 방법은 무엇입니까?

jQuery를 사용하여 왼쪽 및 오른쪽 슬라이딩 토글 방식을 구현하는 방법은 무엇입니까?

vue에서 모바일 측 스크롤 방법을 구현하는 방법은 무엇입니까?

위 내용은 하위 구성 요소의 상위 구성 요소가 전달한 템플릿을 표시하기 위해 vue에서 슬롯을 구현하는 방법(자세한 자습서)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.