Vue에서 슬롯을 업데이트하는 방법.JS

Vue에서 슬롯을 업데이트하는 방법.JS

나는 아래에 단순화된 Vue 구성요소를 가지고 있다.

여기 템플릿이 있다.

<template>
    <slot></slot>
</template>

슬롯에 HTML이 포함되어 있을 수 있기 때문에 나는 간단히 바인딩할 수 있는 소품보다는 슬롯을 사용하기로 결정했다.나는 그것을 그대로 유지하고 싶다.

나는 서버로부터 새로운 HTML을 얻는 방법이 있다.이 새로운 HTML을 사용하여 슬롯을 업데이트하고 싶다.슬롯이 반응하는지, 그리고 내가 이것을 어떻게 해낼 수 있는지 잘 모르겠다.

다음을 사용하여 기본 슬롯을 볼 수 있다.this.$slots.default[0], 그러나 HTML 컨텐츠의 문자열로 업데이트하는 방법을 모른다.단순히 문자열을 요소에 할당하는 것은 명백히 잘못된 것이다..innerHtml사용할 수 있는 기능이 아니기 때문에 작동하지 않고.text효과가 없다.슬롯 객체에 텍스트 요소가 존재하더라도 요소 속성이 우선한다고 가정한다.

논평에서 제안하는 대로, 나는 이것을 컴퓨터 자산과 함께 시도해 보았다.

<span v-html="messageContent"><slot></slot></span>

하지만 지금 문제는 그것이 나에게 전달된 슬롯을 덮어쓴다는 것이다.

Vue에서 새 HTML로 슬롯을 반응적으로 업데이트하는 방법JS?

내 생각에 너의 문제는 어떻게 해야 하는지에 대한 오해에서 비롯된 것 같아.<slot>본질적으로 VueJS에서 작동한다.슬롯은 소비하는 상위 구성요소의 콘텐츠를 하위 구성요소로 상호 저장하는데 사용된다.HTML에 해당하는v-bind:prop. 사용할 때v-bind:prop구성 요소에서 데이터를 자식 구성 요소로 효과적으로 전달하고 있는 경우.이것은 슬롯과 같다.

구체적인 예나 코드 없이 이 대답은 기껏해야 추측에 불과하다.부모 구성 요소는 VueJS 앱 자체로, 자식 구성 요소는<slot>요소

<!-- Parent template -->
<div id="app">
    <custom-component>
        <!-- content here -->   
    </custom-component>
</div>

<!-- Custom component template -->
<template>
    <slot></slot>
</template>

이 경우, 앱은 정적 HTML을 하위 구성요소에 전달하는 기본 접지 상태를 가진다.

<!-- Parent template -->
<div id="app">
    <custom-component>
        <!-- Markup to be interweaved into custom component -->
        <p>Lorem ipsum dolor sit amet.</p>
    </custom-component>
</div>

<!-- Custom component template -->
<template>
    <slot></slot>
</template>

그런 다음 이벤트가 실행되면 해당 지상 상태 표시를 새로 들어오는 마크업으로 교체하십시오.이것은 들어오는 HTML을 에 저장함으로써 가능하다.data속성, 단순하게 사용v-html그것을 조건부로 만들어 주기 위해서.들어오는 마크를 앱의 마킹에 저장하고 싶다고 하자.vm.$data.customHTML:

data: {
    customHTML: null
}

그러면 템플릿은 다음과 같이 나타날 것이다.

<!-- Parent template -->
<div id="app">
    <custom-component>
        <div v-if="customHTML" v-html="customHTML"></div>
        <div v-else>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </custom-component>
</div>

<!-- Custom component template -->
<template>
    <slot></slot>
</template>

시도해 본 코드와는 대조적으로 다음과 같은 차이가 있다는 점에 유의하십시오.

• 자녀에게 전달할 마크업을 지시하는 것은 부모 구성 요소(즉, 소비 구성 요소)이다.
• 아동 구성 요소는 그것이 얻는 것만큼 멍청하다: 그것은 단지 마크를 받고 그것을 렌더링한다.<slot>

---

아래 개념 증명서를 참조하십시오.

var customComponent = Vue.component('custom-component', {
  template: '#custom-component-template'
});

new Vue({
  el: '#app',
  data: {
    customHTML: null
  },
  components: {
    customComponent: customComponent
  },
  methods: {
    updateSlot: function() {
      this.customHTML = '<p>Foo bar baz</p>';
    }
  }
});

.custom-component {
  background-color: yellow;
  border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <h1>I am the app</h1>
  <button type="button" @click="updateSlot">Click me to update slot content</button>
  <custom-component>
    <div v-if="customHTML" v-html="customHTML">
    </div>
    <div v-else>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </custom-component>
</div>

<!-- custom-component template -->
<script type="text/template" id="custom-component-template">
  <div class="custom-component">
    <h2>I am a custom component</h2>
    <!-- slot receives markup set in <custom-component> -->
    <slot></slot>
  </div>
</script>

아래는 슬롯에 대한 규칙을 어겨서 이 의견(현재 컴포넌트 레벨에서 직접 슬롯에 html 로딩)이 마음에 들지 않지만 나의 해결책이다.그리고 이렇게 해야 할 것 같아 (웃음)<component><template v-html="yourHtml"></template></component>)) 슬롯은 Vue가 설계한 업무에 집중할 것이기 때문에 더 좋을 것이다.

핵심은this.$slots.defaultVNODE가 하나일거야 그래서 나는extend()그리고$mount()_vnode를 얻기 위해서.

Vue.config.productionTip = false

Vue.component('child', {
  template: '<div><slot></slot><a style="color:green">Child</a></div>',
  mounted: function(){
    setTimeout(()=>{
      let slotBuilder = Vue.extend({
        // use your html instead
        template: '<div><a style="color:red">slot in child</a></div>',
      })
      let slotInstance = new slotBuilder()
      this.$slots.default = slotInstance.$mount()._vnode
      this.$forceUpdate()
    }, 2000)
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      test: ''
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<child><h1>Test</h1></child>
</div>

참조URL: https://stackoverflow.com/questions/50241423/how-to-update-a-slot-in-vue-js