avoid overwriting inherited properties when initializing props (fix vuejs#1012)

Author: yyx990803

src/compiler/compile-props.js

@@ -111,9 +111,7 @@ function makePropsLinkFn (props) {
           if (prop.mode === propBindingModes.ONE_TIME) {
             // one time binding
             value = vm._context.$get(prop.parentPath)
-            if (_.assertProp(prop, value)) {
-              vm[path] = vm._data[path] = value
-            }
+            _.initProp(vm, prop, value)
           } else {
             // dynamic binding
             vm._bindDir('prop', el, prop, propDef)
@@ -130,9 +128,7 @@ function makePropsLinkFn (props) {
         value = options.type === Boolean && prop.raw === ''
           ? true
           : _.toBoolean(_.toNumber(prop.raw))
-        if (_.assertProp(prop, value)) {
-          vm[path] = vm._data[path] = value
-        }
+        _.initProp(vm, prop, value)
       }
     }
   }

src/directives/prop.js

@@ -48,12 +48,10 @@ module.exports = {
     // !!! We need to set it also on raw data here, because
     // props are initialized before data is fully observed
     var value = this.parentWatcher.value
-    if (_.assertProp(prop, value)) {
-      if (childKey === '$data') {
-        child._data = value
-      } else {
-        child[childKey] = child._data[childKey] = value
-      }
+    if (childKey === '$data') {
+      child._data = value
+    } else {
+      _.initProp(child, prop, value)
     }
 
     // only setup two-way binding if this is not a one-way

src/util/misc.js renamed to src/util/component.js

@@ -1,5 +1,55 @@
 var _ = require('./index')
-var config = require('../config')
+
+/**
+ * Check if an element is a component, if yes return its
+ * component id.
+ *
+ * @param {Element} el
+ * @param {Object} options
+ * @return {String|undefined}
+ */
+
+exports.commonTagRE = /^(div|p|span|img|a|br|ul|ol|li|h1|h2|h3|h4|h5|code|pre)$/
+exports.checkComponent = function (el, options) {
+  var tag = el.tagName.toLowerCase()
+  if (tag === 'component') {
+    // dynamic syntax
+    var exp = el.getAttribute('is')
+    el.removeAttribute('is')
+    return exp
+  } else if (
+    !exports.commonTagRE.test(tag) &&
+    _.resolveAsset(options, 'components', tag)
+  ) {
+    return tag
+  /* eslint-disable no-cond-assign */
+  } else if (tag = _.attr(el, 'component')) {
+  /* eslint-enable no-cond-assign */
+    return tag
+  }
+}
+
+/**
+ * Set a prop's initial value on a vm and its data object.
+ * The vm may have inherit:true so we need to make sure
+ * we don't accidentally overwrite parent value.
+ *
+ * @param {Vue} vm
+ * @param {Object} prop
+ * @param {*} value
+ */
+
+exports.initProp = function (vm, prop, value) {
+  if (exports.assertProp(prop, value)) {
+    var key = prop.path
+    if (key in vm) {
+      _.define(vm, key, value, true)
+    } else {
+      vm[key] = value
+    }
+    vm._data[key] = value
+  }
+}
 
 /**
  * Assert whether a prop is valid.
@@ -67,56 +117,3 @@ function formatType (val) {
 function formatValue (val) {
   return Object.prototype.toString.call(val).slice(8, -1)
 }
-
-/**
- * Check if an element is a component, if yes return its
- * component id.
- *
- * @param {Element} el
- * @param {Object} options
- * @return {String|undefined}
- */
-
-exports.commonTagRE = /^(div|p|span|img|a|br|ul|ol|li|h1|h2|h3|h4|h5|code|pre)$/
-exports.checkComponent = function (el, options) {
-  var tag = el.tagName.toLowerCase()
-  if (tag === 'component') {
-    // dynamic syntax
-    var exp = el.getAttribute('is')
-    el.removeAttribute('is')
-    return exp
-  } else if (
-    !exports.commonTagRE.test(tag) &&
-    _.resolveAsset(options, 'components', tag)
-  ) {
-    return tag
-  /* eslint-disable no-cond-assign */
-  } else if (tag = _.attr(el, 'component')) {
-  /* eslint-enable no-cond-assign */
-    return tag
-  }
-}
-
-/**
- * Create an "anchor" for performing dom insertion/removals.
- * This is used in a number of scenarios:
- * - block instance
- * - v-html
- * - v-if
- * - component
- * - repeat
- *
- * @param {String} content
- * @param {Boolean} persist - IE trashes empty textNodes on
- *                            cloneNode(true), so in certain
- *                            cases the anchor needs to be
- *                            non-empty to be persisted in
- *                            templates.
- * @return {Comment|Text}
- */
-
-exports.createAnchor = function (content, persist) {
-  return config.debug
-    ? document.createComment(content)
-    : document.createTextNode(persist ? ' ' : '')
-}

src/util/dom.js

@@ -234,3 +234,27 @@ exports.isTemplate = function (el) {
   return el.tagName &&
     el.tagName.toLowerCase() === 'template'
 }
+
+/**
+ * Create an "anchor" for performing dom insertion/removals.
+ * This is used in a number of scenarios:
+ * - block instance
+ * - v-html
+ * - v-if
+ * - component
+ * - repeat
+ *
+ * @param {String} content
+ * @param {Boolean} persist - IE trashes empty textNodes on
+ *                            cloneNode(true), so in certain
+ *                            cases the anchor needs to be
+ *                            non-empty to be persisted in
+ *                            templates.
+ * @return {Comment|Text}
+ */
+
+exports.createAnchor = function (content, persist) {
+  return config.debug
+    ? document.createComment(content)
+    : document.createTextNode(persist ? ' ' : '')
+}

src/util/index.js

@@ -4,6 +4,6 @@ var extend = lang.extend
 extend(exports, lang)
 extend(exports, require('./env'))
 extend(exports, require('./dom'))
-extend(exports, require('./misc'))
-extend(exports, require('./debug'))
 extend(exports, require('./options'))
+extend(exports, require('./component'))
+extend(exports, require('./debug'))

test/unit/specs/directives/prop_spec.js

@@ -384,5 +384,24 @@ if (_.inBrowser) {
       expect(hasWarned(_, 'Expected Number')).toBe(true)
       expect(el.textContent).toBe('AAA')
     })
+
+    it('should not overwrite inherit:true properties', function () {
+      var vm = new Vue({
+        el: el,
+        data: {
+          msg: 'hi!'
+        },
+        template: '<test msg="ho!"></test>',
+        components: {
+          test: {
+            props: ['msg'],
+            inherit: true,
+            template: '{{msg}}'
+          }
+        }
+      })
+      expect(vm.msg).toBe('hi!')
+      expect(el.textContent).toBe('ho!')
+    })
   })
 }