Please note that slots are not reactive

MaayaSis 0
Viewed 18

Why is slot said to be no reactive? https://v2.vuejs.org/v2/api/index.html#vm-slots

Following is the example, when i click component's button, the headerValue will add, if the slot is no reactive, then the component childern will not render, but actually it's opposite

<!-- component A -->
<template>
  <div>
    <header-slot>
      <template slot="header">
        <div>{{ headerValue }}</div>
      </template>
    </header-slot>
    <button @click="changeProp">change</button>
  </div>
</template>
<script>
import HeaderSlot from '@/views/headerSlot.vue'
export default {
  components: {
    HeaderSlot
  },
  data() {
    return {
      headerValue: 1
    }
  },
  methods: {
    changeProp() {
      this.headerValue += 1
    }
  }
}
</script>

<template>
<!-- component children -->
  <h1>
    inner-text
    <slot name="header" />
  </h1>
</template>
vuejs2 javascript html
1 Answers

The example you're referring to is using this snippet of code

Vue.component('blog-post', {
  render: function (createElement) {
    var header = this.$slots.header //  referring to that slot
    var body   = this.$slots.default
    var footer = this.$slots.footer
    return createElement('div', [
      createElement('header', header),
      createElement('main', body),
      createElement('footer', footer)
    ])
  }
})

aka using this.$slots.header in a render function is probably not reactive.

Of course, if you have a slot in place and you have some updates on a data or computed state, it will be reactive and update itself but here, the given point is about the vm.$slots (which is read only btw).

kissu0
Related