feat(core): support passing down scopedSlots with v-bind

[yyx990803]

Allow passing down scoped slots using v-bind:

<child v-bind="{ scopedSlots: $scopedSlots }">
</child>

close #7178, close #7351

[yyx990803]

Btw, this is still open to discussion, since the syntax isn't entirely consistent.

You can do v-bind="{ ref: 'foo', slot: 'bar' }" which makes sense because ref and slot can be bound individually as attributes, but scopedSlots is not.

Internally ref and slot are treated specially because they are "reserved" attributes and thus merged into the VNode's data as a root-level property.

So alternatively, we can expose a special convention for v-bind: if a property starts with $, it will always be merged as a root-level property into the VNode's data.

This then allows the usage:

<child v-bind="{ $scopedSlots } />

In addition, if you know the underlying VNode data interface, you can also do low-level stuff without dropping into render functions:

<child v-bind="{
  $on: {
    someEvent: someMethod
  },
  $nativeOn: {
    click: someMethod
  }
}"/>

[ktsn]

What about adding a dedicated directive for merging vnode data? Since v-bind is used to be used for passing parent component data to child component attribute/props, it is a bit weird if it can modify underlying vnode data, IMHO.

If we have such directive we can simply write the vnode data as the same shape as in render function (named it v-vnode as a placeholder 😉 ):

<child v-vnode="{
  scopedSlots: $scopedSlots,
  on: {
    someEvent: someMethod
  },
  nativeOn: {
    click: someMethod
  }
}"/>

We may write directive argument like v-bind:

<child v-vnode:scoped-slots="$scopedSlots" />

This also has a benefit that we may able to write template type checker for that as we can simply utilize Vue's typescript typings. (FYI: The current WIP implementation of template type checker is here)

[dennythecoder]

The specific directive proposed by @ktsn seems a little awkward to me, but I think it would make sense to separate the behavior to improve readability.

[bigianb]

What's the status of this?

[kellym]

So is there a consensus on using a different tag name or not? If so, what should it be called?

Otherwise, this is clearly a hangup for a lot of people using Vue (googling led me to 5-6 different issues on the same topic) and it'd be nice to either give this a thumbs up or have some direction in what needs to be done to get this shipped.

As an added note, the current "solution" of using a render function is pretty silly, especially when templates get complex and/or are already written and are getting new components added to them.

[ClickerMonkey]

I wouldn't recommend this solution, but I needed this functionality now - so I implemented @yyx990803 's change as a plugin:

var BindScopedSlotsPlugin = {
  install: function(Vue, options) {
    Vue.prototype._b = function bindObjectProps (
      data,
      tag,
      value,
      asProp,
      isSync
    ) {
      if (value) {
        if (value === null || typeof value !== 'object') {
          warn(
            'v-bind without argument expects an Object or Array value',
            this
          );
        } else {
          if (Array.isArray(value)) {
            var res = {};
            for (var i = 0; i < value.length; i++) {
              if (value[i]) {
                Vue.util.extend(res, value[i]);
              }
            }
            value = res;
          }
          var hash;
          var loop = function ( key ) {
            if (
              key === 'class' ||
              key === 'style' ||
              key === 'scopedSlots' || // new code
              Vue.config.isReservedAttr(key)
            ) {
              hash = data;
            } else {
              var type = data.attrs && data.attrs.type;
              hash = asProp || Vue.config.mustUseProp(tag, type, key)
                ? data.domProps || (data.domProps = {})
                : data.attrs || (data.attrs = {});
            }
            if (!(key in hash)) {
              hash[key] = value[key];

              if (isSync) {
                var on = data.on || (data.on = {});
                on[("update:" + key)] = function ($event) {
                  value[key] = $event;
                };
              }
            }
          };

          for (var key in value) loop( key );
        }
      }
      return data;
    };
  }
};

Vue.use( BindScopedSlotsPlugin );

The syntax is as mentioned initially: v-bind="{ scopedSlots: $scopedSlots }"

[joernroeder]

@ClickerMonkey thanks for building the plugin! there is a tiny typo: if (arr[i]) needs to be replaced with if (value[i])…

[ClickerMonkey]

Thanks! I have a smaller simpler version:

    Vue.prototype._b = (function (bind) {
      return function(data, tag, value, asProp, isSync) {
        if (value && value.$scopedSlots) {
          data.scopedSlots = value.$scopedSlots;
          delete value.$scopedSlots;
        }
        return bind.apply(this, arguments);
      };
    })(Vue.prototype._b);

And you just need to add v-bind="{$scopedSlots}" to the component.

[RedShift1]

Check out this solution too: https://stackoverflow.com/a/52823029/2050460

[ggirodda]

I edited the @ClickerMonkey script to merge the parent and the current $scopedSlots, maybe it can be useful for someone

import Vue from "vue"

Vue.prototype._b = (function(bind) {
  return function(data, tag, value, asProp, isSync) {
    if (value && value.$scopedSlots) {
      data.scopedSlots = {
        ...data.scopedSlots,
        ...value.$scopedSlots
      }
      delete value.$scopedSlots
    }
    return bind.apply(this, arguments)
  }
})(Vue.prototype._b)

[yyx990803]

So I don't think we will land this, because:

1. I'm not entirely satisfied with the consistency of the change. Feels like a dirty special case.

2. There is already a way to make it work in userland.

3. This is probably the most important reason: we want to avoid landing changes in v2 that would then have to be broken in v3. In v3, slots and scoped slots are being unified under $slots, and slots itself is becoming a reserved prop like key and ref. This means in v3 you can just do:

<foo :slots="$slots"></foo>

Moreover, we have other changes in v3 that makes passing things down to child components easier (RFC in early 2019).

[ClickerMonkey]

Glad to hear about v3. Thanks Evan for everything!

[shameleo]

3. In v3, slots and scoped slots are being unified under $slots, and slots itself is becoming a reserved prop like key and ref. This means in v3 you can just do:

<foo :slots="$slots"></foo>

So, there is no reserved slot prop in Vue 3. Any new ways to pass down scoped slots are available? Or planned? Or we still need old workarounds like <template> / <slot> pair?
Ahh, I see: vuejs/core#575