SOURCE

console 命令行工具 X clear

                    
>
console
Vue.component('column', {
  props: {
    t: String
  },
  created() {
    console.log('created this.$scopedSlots.header ', this.$scopedSlots.header)
    this.$parent.fn = () => this.$scopedSlots.header()
  },
  watch: {
    t(v) {
      console.log('newVal => ', v)
    }
  },
  beforeUpdate() {
    console.log('column beforeUpdate')
  },
  updated() {
    console.log('column updated')
  },
  render(h) {
    return h('div', null, ['column'])
  }
});

Vue.component('render-slot', {
  render(h) {
		const fn = this.$parent.fn
    if (fn) {
      return h('div', null, fn())
    } else {
      return h('div', null, ['no render function'])
    }
  }
})

var Main = {
  data() {
    return {
      y: 0,
      fn: null
    }
  },
  updated() {
    console.log('updated ', this.fn)
  }
}

var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<!-- <script src="//unpkg.com/vue@2.5.22/dist/vue.js"></script> -->
<script src="//unpkg.com/element-ui@2.6.1/lib/index.js"></script>
<div id="app">
  <el-button @click="y += 1">x</el-button>
  <p>y => {{ y }}</p>

  <column :t="y + ''">
    <template v-slot:header>
      Header content {{ y }}
    </template>
  </column>

  <render-slot>
  </render-slot>
</div>
@import url("//unpkg.com/element-ui@2.6.1/lib/theme-chalk/index.css");