props should use default value if passed value is undefined

Author: yyx990803

src/compiler/compile-props.js

@@ -9,11 +9,9 @@ import {
   getBindAttr,
   isLiteral,
   initProp,
-  hasOwn,
   toBoolean,
   toNumber,
-  stripQuotes,
-  isObject
+  stripQuotes
 } from '../util/index'
 
 const propBindingModes = config._propBindingModes
@@ -165,7 +163,7 @@ function makePropsLinkFn (props) {
       vm._props[path] = prop
       if (raw === null) {
         // initialize absent prop
-        initProp(vm, prop, getDefault(vm, options))
+        initProp(vm, prop, undefined)
       } else if (prop.dynamic) {
         // dynamic prop
         if (prop.mode === propBindingModes.ONE_TIME) {
@@ -203,34 +201,3 @@ function makePropsLinkFn (props) {
     }
   }
 }
-
-/**
- * Get the default value of a prop.
- *
- * @param {Vue} vm
- * @param {Object} options
- * @return {*}
- */
-
-function getDefault (vm, options) {
-  // no default, return undefined
-  if (!hasOwn(options, 'default')) {
-    // absent boolean value defaults to false
-    return options.type === Boolean
-      ? false
-      : undefined
-  }
-  var def = options.default
-  // warn against non-factory defaults for Object & Array
-  if (isObject(def)) {
-    process.env.NODE_ENV !== 'production' && warn(
-      'Object/Array as default prop values will be shared ' +
-      'across multiple instances. Use a factory function ' +
-      'to return the default value instead.'
-    )
-  }
-  // call factory function for non-Function types
-  return typeof def === 'function' && options.type !== Function
-    ? def.call(vm)
-    : def
-}

src/util/component.js

@@ -1,7 +1,7 @@
 import { warn } from './debug'
 import { resolveAsset } from './options'
 import { getAttr, getBindAttr } from './dom'
-import { isArray, isPlainObject } from './lang'
+import { isArray, isPlainObject, isObject, hasOwn } from './lang'
 
 export const commonTagRE = /^(div|p|span|img|a|b|i|br|ul|ol|li|h1|h2|h3|h4|h5|h6|code|pre|table|th|td|tr|form|label|input|select|option|nav|article|section|header|footer)$/
 export const reservedTagRE = /^(slot|partial|component)$/
@@ -100,11 +100,45 @@ function getIsBinding (el) {
 export function initProp (vm, prop, value) {
   const key = prop.path
   value = coerceProp(prop, value)
+  if (value === undefined) {
+    value = getPropDefaultValue(vm, prop.options)
+  }
   vm[key] = vm._data[key] = assertProp(prop, value)
     ? value
     : undefined
 }
 
+/**
+ * Get the default value of a prop.
+ *
+ * @param {Vue} vm
+ * @param {Object} options
+ * @return {*}
+ */
+
+function getPropDefaultValue (vm, options) {
+  // no default, return undefined
+  if (!hasOwn(options, 'default')) {
+    // absent boolean value defaults to false
+    return options.type === Boolean
+      ? false
+      : undefined
+  }
+  var def = options.default
+  // warn against non-factory defaults for Object & Array
+  if (isObject(def)) {
+    process.env.NODE_ENV !== 'production' && warn(
+      'Object/Array as default prop values will be shared ' +
+      'across multiple instances. Use a factory function ' +
+      'to return the default value instead.'
+    )
+  }
+  // call factory function for non-Function types
+  return typeof def === 'function' && options.type !== Function
+    ? def.call(vm)
+    : def
+}
+
 /**
  * Assert whether a prop is valid.
  *

test/unit/specs/directives/internal/prop_spec.js

@@ -681,4 +681,22 @@ describe('prop', function () {
     expect(hasWarned('did you mean `prop-b`')).toBe(true)
     expect(hasWarned('did you mean `prop-c`')).toBe(true)
   })
+
+  it('should use default for undefined values', function () {
+    var vm = new Vue({
+      el: el,
+      template: '<comp :a="a"></comp>',
+      components: {
+        comp: {
+          template: '{{a}}',
+          props: {
+            a: {
+              default: 1
+            }
+          }
+        }
+      }
+    })
+    expect(vm.$el.textContent).toBe('1')
+  })
 })