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/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");