vue

vue关于slot、render的用法

通过下面一段代码展示

<script src="https://unpkg.com/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>

<div id="editor">
  <page>
    <right slot="right"></right>
    <left slot="left"></left>
    <span>哈哈</span>
    <span>Hello</span>
  </page>
  <heading :level="1">i'm header</heading>
</div>

var vm = ''
var leftContext = ''
const left = {
    template: '<span>{{name}}</span>',
  data () {
    return {
        name: 'left'
    }
  }
}
const right = {
    template: '<span>right</span>'
}
const page = {
    template: `<div :style="{height: height}">
    <slot name="left"></slot>
    <span>间隔</span>
    <slot name="right"></slot>
    <slot></slot>
  </div>`,
   mounted () {
    console.log('\npage:')
    console.log('this.$slots: ', this.$slots)
    console.log('this.$slots.default: ', this.$slots.default)
    leftContext = this.$slots.left[0].context
   },
   data () {
    return {
        height: '50px'
    }
   }
}
const heading = {
    render (h) {
    return h('h' + this.$props.level, this.$slots.default)
  },
   mounted () {
        console.log('\nheading:')
        console.log('this.$slots: ', this.$slots)
        console.log('this.$slots.default: ', this.$slots.default)
   },
  props: {
    level: {
        type: Number,
      required: true
    }
  }
}
new Vue({
  el: '#editor',
  components: {
    'left': left,
    'right': right,
    'page': page,
    'heading': heading
  },
  mounted () {
    vm = this
    console.log('\n\n\nleftContext', leftContext)
    console.log('\nvm: ', vm)
    console.log('\n leftContext.$options === vm.$options: ', leftContext.$options === vm.$options)
  }
})

1. slot
   a. 具名slot使用：在组件中通过<slot name="left"></slot>定义一个具名的插槽，在使用组件的时候通过<left slot="left"></left>即可将代码插入插槽中
   b. 未命名的slot属于默认插槽，组件包含的内容（具名插槽除外）将插入默认插槽中

2. render: 使用方法类似react的render

3. 每个返回的slot都是一个VNode，VNode的context就是new Vue(……)返回的对象