Vue.js: 0.12.5 Release

Improvements

• Transcluded components are now considered children of their host component. To better illustrate this:

  <tabs><!-- the host -->
    <tab>{{msg}}</tab><!-- the transcluded component -->
  </tabs>

In previous versions, <tab> will be instantiated as a child of the host's parent, so despite being visually nested under <tabs>, <tab> is actually a sibling of <tabs> in the internal component tree. This makes it a bit awkward for <tab> and <tabs> to communicate between each other.

In 0.12.5, <tab> is now a proper child of <tabs>. This means inside <tab>, this.$parent will point to <tabs>, and all transcluded <tab> instances can be found inside <tabs>'s this.$children array. This also means that the event system ($dispatch() and $broadcast()) will now work between the host and the transcluded components.

Note that {{msg}}, together with any directives on the transcluded components, will still be compiled in the host's parent scope.

This change should make it easier to write a suite of components that are intended to be composed together. - props now have an alternative syntax that is more inline with other options' key-value based style:

  props: {
    'prop-a': String, // type check constructor
    'prop-b': null, // accept any type
    'prop-c': { // object descriptor
      type: Number,
      required: true,
      default: 100 // new: default value
    }
  }

The previous array-based syntax still works, but will likely be deprecated in future versions. - props option objects can now also specify a default value, as seen in the above example. - Improved Boolean props handling:

When a prop has explicit Boolean type specified, it can be used similar to a HTML boolean attribute, e.g. checked for input elements. This means it can simply appear as an attribute without a value and its JavaScript value will resolve to true, and omitting it will resolve the JavaScript value to false.

    props: {
      'my-prop': Boolean
    }

    <example my-prop>
      <!-- myProp === true -->
    </example>

    <example>
      <!-- myProp === false -->
    </example>

• Improved watch option syntax. You can now use an Object to provide additional options to a watcher:

  watch: {
    someValue: {
      handler: function () { /*...*/ }, // or use a method name string
      deep: true,
      immediate: true
    }
  }

Fixed

• Fixed cases where templates that contain only <content>, <component>, <partial> or a single component are ignored silently. The first three cases will now turn the instance into a fragment instance and render correctly; the last case will result in a warning.
• Fixed the issue where a parent's registered partials are not available to its children.
• #985 v-ref not cleared properly when a static component is torn down.
• #987 v-if not working on element directives
• #990 array.$remove() not returning the removed element