Vue 렌더링 기능 내에서 하위 제어

Vue 렌더링 기능 내에서 하위 제어

Vue.js에서 쉬워 보이는 컴포넌트를 작성하는데 어려움을 겪고 있습니다.JS 렌더 기능을 사용하여 옵션 제목, 콘텐츠 및 옵션 바닥글을 갖춘 부트스트랩 패널입니다.목적은 다음과 같습니다.

<panel>

  <panel-header> Header </panel-header>

     [ The panel content goes here ]

  <panel-footer> Footer </panel-footer>

</panel>

질문입니다.자녀 컴포넌트(패널헤더 및 패널푸터)를 렌더링 기능에 포함시켜 옵션인 채로 독자적인 클래스(패널본체 클래스 및 소품 타이틀)를 사용하여 패널 본체를 자유롭게 구성할 수 있도록 하려면 어떻게 해야 합니까?

달리 말하면:어떻게 하면 아이들을 제어하고 컴포넌트를 분리하여 패널 중앙에 [자녀]를 채울 수 있을까요?

렌더링 화면은 다음과 같습니다.

import classNames from 'classnames';

export const props = {
tag: {
  type: String,
  default: "div"
},
className: {
  type: String
},
align: {
  type: String,
  default: 'left'
},
title: {
  type: String,
},
header: {
  type: String,
}
};

export default {
 functional: true,
 props,
 render(h, { props, data, children }) {
  const dataObj = {
    class: classNames(
      'card',
      props.align ? 'text-' + props.align : '',
      props.className ? props.className : ''
    ),
 };
 const title = [
  h('h4', {
    class: 'card-title'
  }, props.title)
];

 const content = [
   h('div', {
     class: 'card-body'
   })
 ];
return h(props.tag, dataObj, [title, children] );
}
};

안부를 전합니다, 파코 파치치

편집: 위와 같이 하면 원하는 효과를 얻을 수 있습니다.패널에 헤더, 콘텐츠 및 바닥글이 올바른 순서로 표시됩니다.그러나 바닥글과 헤더를 포함하지 않고 패널 컨텐츠에만 일부 속성을 추가하려면 어떻게 해야 합니까?따라서, 그들도 어린애로 간주될 것이고, 따라서 나의 조종에 복종할 것이다.따로따로 취급하고 싶은데, 같은 기능 안에서 취급하고 싶습니다.

기본적으로 아이를 검사하고 필요에 따라 머리글과 바닥글을 잡아 원하는 대로 배치합니다.

console.clear()

const PanelHeader = {
  template: `<div>Im a panel header</div>`
}

const PanelFooter = {
  template: `<div>Im a panel Footer</div>`
}

const Panel = {
  functional: true,
  render(h, context){
    // find the header if there is one. Note that if there is more than
    // one panel-header, only the first one will be used
    let header = context.children.find(c => c.componentOptions && c.componentOptions.tag === "panel-header")
    // same deal for the footer
    let footer = context.children.find(c => c.componentOptions && c.componentOptions.tag === "panel-footer")
    // filter out anything that isn't header/footer
    let body = context.children.filter(c => c !== header && c !== footer)
    
    // layout as desired.
    return h('div', [header, body, footer])
  }
}

new Vue({
  el: "#app",
  components: {Panel, PanelHeader, PanelFooter}
})

<script src="https://unpkg.com/vue@2.5.3"></script>
<div id="app">
  <panel>
    <panel-footer></panel-footer>
    some stuff
    <panel-header></panel-header>
  </panel>
  <hr>
  <panel>
    some stuff
  </panel>
  <hr>  
  <panel>
    <panel-footer></panel-footer>
    some stuff
  </panel>
</div>

이 예에서는 컴포넌트를 가져와 배치하는 방법만 보여 줍니다.그것은 분명히 당신의 예를 정확히 따르지 않거나 필요한 수업을 포함하지 않는다.

언급URL : https://stackoverflow.com/questions/47476916/controlling-children-from-within-vues-render-function