단일 파일 컴프에서 글로벌 Vue 구성 요소에 컨텐츠를 추가할 수 있는가?

단일 파일 컴프에서 글로벌 Vue 구성 요소에 컨텐츠를 추가할 수 있는가?

우리가 원하는 콘텐츠를 렌더링할 글로벌 컴포넌트를 만들었다.

이 구성 요소는 매우 간단하다.

<template>
  <section
    id="help"
    class="collapse"
  >
    <div class="container-fluid">
      <slot /> 
    </div>
  </section>
</template>

<script>
  export default {
    name: 'VHelp',
  };
</script>

내 기본 템플릿 안쪽에서

<v-help />

다른 단일 파일 구성 요소에서 이 구성 요소 슬롯에 내용을 추가하려고 함.

<v-help>
  <p>esgssthsrthsrt</p>
</v-help>

하지만 이것은 논리적으로 p 태그가 안에 있는 내 컴프의 다른 인스턴스를 만들어낸다.내가 하고 싶은 일이 아니야.

그래서 가상 DOM과 렌더링 기능을 사용해보고,slot에 의해<v-elements-generator :elements="$store.state.help.helpElements" />내 안에VHelp콤파스

가게helpElements안에 물체가 있는 단순한 배열이다.

{
   type: 'a',
   config: {
     class: 'btn btn-default',
   },
   nestedElements: [
     {
       type: 'span',
       value: 'example',
     },
     {
       type: 'i',
     },
   ],
},

그럼 내 안에VElementsGeneratorcomp 다음과 같은 객체에서 가상 DOM 내부에 렌더 요소가 있는 렌더 함수를 가지고 있다.

<script>
  import {
    cloneDeep,
    isEmpty,
  } from 'lodash';

  export default {
    name: 'VElementsGenerator',
    props: {
      elements: {
        type: Array,
        required: true,
      },
    },
    methods: {
      iterateThroughObject(object, createElement, isNestedElement = false) {
        const generatedElement = [];

        for (const entry of object) {
          const nestedElements = [];
          let elementConfig = {};

          if (typeof entry.config !== 'undefined') {
            elementConfig = cloneDeep(entry.config);
          }

          if (entry.nestedElements) {
            nestedElements.push(this.iterateThroughObject(entry.nestedElements, createElement, true));
          }

          generatedElement.push(createElement(
            entry.type,
            isEmpty(elementConfig) ? entry.value : elementConfig,
            nestedElements
          ));

          if (typeof entry.parentValue !== 'undefined') {
            generatedElement.push(entry.parentValue);
          }
        }

        if (isNestedElement) {
          return generatedElement.length === 1 ? generatedElement[0] : generatedElement;
        }

        return createElement('div', generatedElement);
      },
    },
    render(createElement) {
      if (this.elements) {
        return this.iterateThroughObject(this.elements, createElement);
      }

      return false;
    },
  };
</script>

이 두 번째 방법은 잘 작동하지만 복잡한 데이터를 렌더링하려면 렌더링 기능 내부에 사용되는 개체가 매우 길고 읽기 복잡하다.

그래서 나는 하위 구성요소에 콘텐츠를 원할 때만 베이스 레이아웃 안에서 사용되는 글로벌 구성요소에 콘텐츠를 추가하는 다른 방법을 찾고 있다.

나는 이것을 사용할 수 없다.VHelpHTML 페이지 아키텍처가 완전히 틀릴 것이기 때문에 어린이 직접 구성 요소는 컴파일한다.

구성 요소의 새 인스턴스를 다시 만들지 않고 단일 파일 컴파일에서 구성 요소 슬롯에 내용(기본적으로 HTML)을 추가할 수 있는지 궁금함

게다가 나는 이것이 Vuex 스토어에 HTML을 문자열로 저장하는 것은 매우 추하다고 생각한다.그래서 나는 이것이 가능한지, 그리고 내가 이것을 하려고 하는 방법을 완전히 바꿔야 하는지조차 모르겠다.

아이디어 있으십니까?

스토어에서는 HTML 구조가 아닌 데이터만 저장해야 한다.이 문제를 해결하는 방법은 저장소에 v-help 구성 요소의 콘텐츠의 현재 상태를 저장하는 것이다.그럼, 싱글 룸이 있을 거야.v-help슬롯이 있는 구성 요소(이미 제안한 대로).매장의 상태에 따라 다른 내용을 전달해야 한다.여기 추상적인 예가 있다.

<v-help>
  <content-one v-if="$store.state.content === 'CONTENT_ONE' />
  <content-two v-else-if="$store.state.content === 'CONTENT_TWO' />
  <content-fallback v-else />
</v-help>

하위 요소 다른 위치:

<div>
  <button @click="$store.commit('setContentToOne')">Content 1</button>
</div>

Vuex 스토어:

state: {
  content: null
},
mutations: {
  setContentToOne(state) {
    state.content = 'CONTENT_ONE';
  }
}

물론 이것은 당신의 요구 사항과 특히 이것이 이것을 달성하는 최선의 방법이라면 얼마나 많은 다른 시나리오가 사용되는지에 달려있다.내가 너를 제대로 이해했다면, 너는 상점에 도움말 요소를 저장하는 거야.또한 현재 선택된 도움말 요소의 배열을 저장한 후 해당 도움말 요소를v-help구성 요소

---

편집:

물론 정적 구성 요소(또는 그 이름)를 저장소에 저장하기만 하면 된다.그런 다음, 아동 구성 요소에서 동적으로 어떤 콘텐츠가 표시되는지 결정할 수 있다.v-help예를 들어,

<v-help>
  <component :is="$store.state.helpComponent" v-if="$store.state.helpComponent !== null" />
</v-help>

테스트 구성 요소:

<template>
  test component
</template>

<script>
export default {
  name: 'test-component'
};
</script>

하위 요소(변수 1, 이름을 Vuex에 저장):

<div>
  <button @click="$store.commit('setHelpComponent', 'test-component')">Set v-help component to 'test-component'</button>
</div>

하위 요소(변수 2, 전체 구성 요소를 Vuex에 저장):

<template>
  <button @click="$store.commit('setHelpComponent', testComponent)">Set v-help component to testComponent (imported)</button>
</template>

<script>
import TestComponent from '@/components/TestComponent';

export default {
  name: 'some-child-component',
  computed: {
    testComponent() {
      return TestComponent;
    }
  }
};
</script>

하위 요소(변수 3, 가져온 구성 요소에서 파생된 이름을 Vuex에 저장, 이 변종과 함께 사용):

<template>
  <button @click="$store.commit('setHelpComponent', testComponentName)">Set v-help component to 'test-component'</button>
</template>

<script>
import TestComponent from '@/components/TestComponent';

export default {
  name: 'some-child-component',
  computed: {
    testComponentName() {
      return TestComponent.name;
    }
  }
};
</script>

Vuex 스토어:

state: {
  helpComponent: null
},
mutations: {
  setHelpComponent(state, value) {
    state.helpComponent = value;
  }
}

동적 구성요소는 설명서를 참조하십시오.<component :is="">구문:https://vuejs.org/v2/guide/components.html#Dynamic-Components

참조URL: https://stackoverflow.com/questions/53409713/is-it-possible-to-add-content-to-a-global-vue-component-from-a-single-file-comp