append slot

by leopoldthecuber

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-container>
    <template slot="append">
      <my-select v-model="value"></my-select>
    </template>
  </my-container>
</div>

JavaScript

var Main = {
  components: {
    'my-select': {
      props: {
        value: Number
      },
      template: `
        <div>
        <p>value: {{ value }}</p>
        <ul>
        <li v-for="i in 5" @click="handleClick(i)" :key="i">{{ i }}</li>
        </ul>
        </div>
      `,
      methods: {
        handleClick(i) {
          this.$emit('input', i)
        }
      }
    },

    'my-container': {
      data() {
        return {
          data: [1, 2, 3]
        }
      },
      render(h) {
        return h(
          'table',
          this._l(this.data, row => h('tr', [h('td', row)])).concat(this.$slots.append)
        )
      }
    }
  },
  data() {
    return {
      value: 1
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')