vuejs 2에서 구성 요소의 내부 html을 변수로 가져옵니다.

vuejs 2에서 구성 요소의 내부 html을 변수로 가져옵니다.

라고 하는 vuejs 컴포넌트가 있다고 합시다.child-component다음과 같이 부모 컴포넌트에 추가됩니다.

<child-component>
  <div>Hello</div>
</child-component>

주의: 이것은 하위 구성요소의 템플릿이 아닙니다.이렇게 하면 하위 구성 요소가 상위 구성 요소에 추가됩니다.

어떻게 하면 이너를 얻을 수 있나요?HTML, 즉<div>Hello</div>문자열로 사용할 수 있습니까?

컴포넌트 내부,child-component, HTML 는, 에서 사용할 수 있습니다.mounted라이프 사이클 핸들러로서this.$el.innerHTML구문 분석된 vnode는 다음 위치에서 사용할 수 있습니다.this.$slots.default.

console.clear()

Vue.component("child-component",{
  template: `<div><slot/></div>`,
  mounted(){
    console.log("HTML", this.$el.innerHTML)
  }
})

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <child-component>
    <div>Hello</div>
  </child-component>
</div>

Vue Child 구성 요소 참조를 사용할 수 있습니다.그러면 하위 구성 요소의 내부에 액세스할 수 있습니다.부모 컴포넌트의 HTML.

참조 속성을 하위 구성 요소에 추가하십시오.원하는 것을 선택할 수 있습니다.

<child-component ref="mychildcomponent">
   <div>Hello</div>
</child-component>

그런 다음 부모 메서드에서 다음과 같은 작업을 수행할 수 있습니다.

let childEl = this.$refs.mychildcomponent

참조한 전체 하위 구성 요소가 childEl로 설정됩니다.내부를 얻으려면HTML은 조금 더 나아가서 다음과 같은 작업을 수행해야 합니다.

let childEl = this.$refs.mychildcomponent.$el.innerHTML

그러면 하위 구성 요소의 내부 문자열이 제공됩니다.HTML.

도움이 될 수 있습니다.https://vuejs.org/v2/guide/components.html#Child-Component-Refs

또는 하위 구성 요소 자체에서 가져오려면 방법 내에서 다음을 수행하십시오.

let componentHTML = this.$el.innerHTML

도움이 됐으면 좋겠다.

언급URL : https://stackoverflow.com/questions/47297815/get-inner-html-of-the-component-as-a-variable-in-vuejs-2