>  기사  >  웹 프론트엔드  >  하위 구성 요소의 Vue 슬롯에 상위 구성 요소 전달을 표시하는 방법

하위 구성 요소의 Vue 슬롯에 상위 구성 요소 전달을 표시하는 방법

php中世界最好的语言
php中世界最好的语言원래의
2018-04-12 14:09:012268검색

이번에는 vue 슬롯이 하위 컴포넌트에 상위 컴포넌트 전달을 표시하는 방법은 무엇입니까? 봐.

상위 구성 요소는 슬롯

속성

을 사용하지 않으며 기본값은 default입니다. 슬롯에서

기본값을 사용

할 수 있습니다. 상위 구성요소가 해당 슬롯을 통과하지 못하면 기본값은 displayed

<!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: '#modal'
    }
    new Vue({
      el: '#app',
      components: {
        // es 简写 ,只写一个的意思为
        // modal:modal
        modal
      },
      methods: {
        click() {
          console.log('aaa')
        }
      }
    })
  </script>
</body>
</html>

이 문서의 사례를 읽은 후 방법을 마스터했다고 믿습니다. . 더 흥미로운 내용에 주목해주세요php 중국어 기타 온라인 관련 기사!

추천 도서:

Vue의 ul-li 태그로 select 태그를 모방하는 방법

위 내용은 하위 구성 요소의 Vue 슬롯에 상위 구성 요소 전달을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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