Vue: 소품으로서의 구성 요소/템플릿

Vue: 소품으로서의 구성 요소/템플릿

나는 현재 vue를 배우려고 노력하고 있으며 전체 구성 요소 개념에 어려움을 겪고 있다.

브라우저 탭과 같이 탭을 정의하는 구성 요소가 있다고 가정해 봅시다.

이 구성 요소에는 다음과 같은 소품들이 있다.name.

구성 요소를 다음과 같이 사용하십시오.

<tab :name="tab.display_name"></tab>

하지만 상황이 좀 더 복잡해질 필요가 있다고 말하자.예를 들어, 당신은 그 이름이 단순히 문자열일 뿐만 아니라, 일반적인 HTML을 원한다. 좋아, 그럼, 당신은 그 소품들을v-html지시어를 사용하고 다음과 같이 탭 구성 요소를 사용하십시오.

<tab :name="'<span class=\'fancy-styling\'>' + tab.display_name + '</span>'"></tab>

이번 건은 인용문이 많아서 알아내는데 시간이 좀 걸렸어.이 탈출 지옥에서 벗어날 방법이 있을까?

어떻게 하면 이것을 자신의 조각/템플릿으로 꺼낼 수 있을까?

그리고 만약 우리가 그것을 더 복잡하게 만든다면? 우리가 소품을 부에 구성요소로 만들 필요가 있다고 말한다면?

<tab :name="'<my-custom-component @click="onClick()">' + tab.display_name + '</my-custom-component>'"></tab>

마지막 것은 여러 단계에서 유효하지 않으며, 인용문들이 엉망이 되는 것도 아니다.

내가 이걸 어떻게 해?가장 좋은 접근법은 무엇인가?

만약 당신이 소품에 html을 주입하려고 한다면, 당신은 정말로 슬롯을 사용하는 것을 보아야 한다.

https://vuejs.org/v2/guide/components-slots.html

구성요소를 사용하는 모든 요점은 우려의 분리를 만든다는 것이다.한 줄에 레이어드된 모든 구성요소를 정의하면 그 목적을 완전히 무너뜨린다.세 개의 개별 구성 요소를 생성하십시오.이와 같은 하나의 컨테이너 구성품.

색인.vue

<template>
    <tab :name="mycoolname"></tab>
</template>
<script>
    import tab from tab.vue
    export default {
        components: {
            tab
        }
</script>

{{name}}을(를) 사용하여 해당 템플릿에서 사용할 수 없는 이름 프로펠러.다음과 같은 탭 구성 요소 내에서:

tab.vue

<template>
    <h1>{{name}}</h1>
    <my-custom-component @click="doStuff()"></my-custom-component>
</template>
<script>
    import my-custom-component from my-custom-component.vue
    export default {
        props: [
            'name'
        ],
        components: {
            my-custom-component
        },
        methods: {
            doStuff () {
                console.log('hooray this totally works')
            }
</script>

나는 여기서 별도의 빌드 파일을 사용하고 있지만, vue를 프로젝트로 가져올 때 개념은 그대로 유지된다.컴포넌트는 간단한 디브(div)부터 모든 것을 포함할 수 있다.<p>전체 페이지 안에이 구성요소 체계는 사물을 조직화하는데 미친 듯이 강력하다.

웹팩이 없다면 다음과 같이 보일 것이다.

var myCustomComponent = { 
    template: `fancyHTML`
}

var Tab= {
    components: {
        'my-custom-component': myCustomComponent 
    },
    template: `even more fancy html containing <my-custom-component>`

new Vue({
   el: '#app'
   components: {
      'tab': Tab
    }
})

}

참조URL: https://stackoverflow.com/questions/49804260/vue-components-templates-as-props