Please note that slots are not reactive-CodePudding

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>

CodePudding user response：

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

Vue.component('blog-post', {
  render: function (createElement) {
    var header = this.$slots.header //