다른 구성 요소의 하위 구성 요소로 Vue 구성 요소

다른 구성 요소의 하위 구성 요소로 Vue 구성 요소

기존 테마를 재사용 가능한 컴포넌트로 변환하는 작업을 하고 있습니다.

현재 다음과 같은 버튼 컴포넌트가 있습니다.

<template>
    <a :href="link" class="button" :class="styling"><slot></slot></a>
</template>

<script>
export default {
    props: {
        link: {},
        styling: {
            default: ''
        }
    }
}
</script>

그리고 HTML에서는 다음과 같이 사용합니다.

<vue-button link="#" styling="tiny bg-aqua">Button 1</vue-button>

이제 기존의 버튼 컴포넌트를 사용하여 "버튼 그룹"을 생성하려고 합니다.

제가 할 수 있는 일은 다음과 같습니다.

<vue-button-group styling="radius tiny">
    <vue-button link="#" styling="tiny bg-aqua">Button 1</vue-button>
    <vue-button link="#" styling="tiny bg-aqua">Button 2</vue-button>
    <vue-button link="#" styling="tiny bg-aqua">Button 3</vue-button>
    <vue-button link="#" styling="tiny bg-aqua">Button 4</vue-button>
</vue-button-group>

저는 VueJs에 매우 익숙하지 않기 때문에 어떻게 대처해야 할지 조금 혼란스럽습니다.필요한 만큼 버튼 컴포넌트를 그룹에 전달할 수 있으면 좋겠습니다.

버튼 그룹에 대한 지금까지의 정보는 다음과 같습니다.

<template>
    <ul class="button-group" :class="styling">
        <li><slot></slot></li>
    </ul>
</template>

<script>
    export default {
        props: {
            styling: {
                default: ''
            }
        }
    }
</script>

물론 버튼 하나로도 동작합니다만, 각각의 버튼을 리스트 항목내에 넣으면서, 그 이상을 허용할 수 있는 방법을 알 수 없습니다.

제가 이 문제에 대해 어떤 제안이나 수정을 해주시면 감사하겠습니다.감사합니다.

컴포넌트의 출력으로 고도의 처리를 하고 싶기 때문에, 이 시점에서 렌더링 기능을 사용할 수 있습니다.이 기능을 사용하면 유연성이 크게 향상됩니다.

Vue.component('button-group', {
    props: {
        styling: {
            default: ''
        }
    },
    render(createElement) { // createElement is usually called `h`
        // You can also do this in 1 line, but that is more complex to explain...
        // const children = this.$slots.default.filter(slot => slot.tag).map(slot => createElement('li', {}, [slot]))
        const children = [];
        for(let i = 0; i < this.$slots.default.length; i++) {
            if(!this.$slots.default[i].tag) {
                // Filter out "text" nodes, so we don't make li elements
                // for the enters between the buttons
                continue;
            }
            children.push(createElement('li', {}, [
                this.$slots.default[i]
            ]));
        }

        return createElement('ul', {staticClass: "button-group",class: this.styling}, children);
    }
})

var app = new Vue({
  el: '#app',
})

.rainbow-background {
    /* todo: implement rainbow background */
    border: red 1px solid;
}
.button-group {
    border-color: blue;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
    <button-group styling="rainbow-background">
        <button>hi</button>
        <button>How are you?</button>
        <button>I'm fine</button>
        <button>Have a nice day!</button>
    </button-group>
</div>

렌더 함수는 가상 html 구조를 반환함으로써 동작합니다.이 구조는 에 대한 반복 호출에 의해 생성됩니다.createElement기능들.createElement 3개의 파라미터, 태그명(예:ul또는li옵션 오브젝트 및 하위 리스트.

우선, 착신 슬롯을 가지는 아이의 리스트를 작성해, 그 안에 격납합니다.this.$slots.default.

그런 다음 이 목록을 루프하여 기본적으로 텍스트인 착신 슬롯 데이터를 필터링합니다. 이는 HTML이 태그 사이의 공백을 텍스트로 간주하기 때문입니다.

이제 최종 구조가 거의 완성되었습니다. 이제 슬롯 요소를 새로 생성한 상태로 포장합니다.li태그를 붙이고 나서 모든 것을 새로운 것으로 랩하는 것으로 생성을 마칩니다.ul적절한 클래스 이름을 태그합니다.

이를 위한 Vue 방법은 이름 슬롯을 사용하여 자녀가 사용하는 데이터를 부모에게 제공하는 것입니다.데이터는 다음 명령을 통해 자식에게 전파됩니다.slot-scope.

여기서 중요한 것은 부모를 통해 자녀에게 전달되는 데이터 흐름입니다.

다음은 프로세스의 작업 코드입니다.https://codepen.io/Flamenco/pen/ZMOdYz

이 예에서는 디폴트슬롯을 사용하고 있기 때문에name부모 또는 자녀에게는 속성이 필요하지 않습니다.

부모

<template>
    <ul class="button-group" :class="styling">
        <li v-for='item in items'><slot :item='item'></slot></li>
    </ul>
</template>

<script>
   ...
   props:{
      items: Array
   }
</script>

어린아이

<vue-button-group class="radius tiny" :items='items'>
    <template slot-scope='scope'>
       <vue-button link="#" styling="tiny bg-aqua">{{scope.item.text}}</vue-button>
   </template>
</vue-button-group>


<script>
   ...
   data:{
      items:[{text:'Button 1'},{text:'Button 2'},{text:'Button 3}]
   }
</script>

이를 위한 가능한 솔루션은 v-for를 사용하는 것입니다.

<button v-for="button in buttons" :key="button">
Button{{button}}
</button>

여기 바이올린이 있습니다.

서부터 기, your, your, 로, 로, 로, your, your, your, your, your, your, your, from, your, from, from, from, from, from, from your,<buttongroup>- "의 - infos, "infos"로 <buttongroup>소품으로서(내 바이올린을 켜면)data- part part)를 합니다.

단추 외에 다른 것을 렌더링하고 해당 컴포넌트를 삽입하려면 슬롯이 적합합니다.그렇지 않으면 슬롯에서는 아무것도 얻을 수 없습니다.

이름 있는 슬롯을 사용해 볼 수도 있습니다.

<template>
    <ul class="button-group">
        <li><slot name="buttons"></slot></li>
    </ul>
</template>

그 외:

<vue-button-group class="radius tiny">
    <template slot="buttons">
       <vue-button link="#" styling="tiny bg-aqua">Button 1</vue-button>
       <vue-button link="#" styling="tiny bg-aqua">Button 2</vue-button>
       <vue-button link="#" styling="tiny bg-aqua">Button 3</vue-button>
       <vue-button link="#" styling="tiny bg-aqua">Button 4</vue-button>
   </template>
</vue-button-group>

언급URL : https://stackoverflow.com/questions/52064702/vue-component-as-child-of-another-component