fix props validation fails (#3183) (#3193)

Author: kazupon

src/compiler/compile-props.js

@@ -38,6 +38,7 @@ const settablePathRE = /^[A-Za-z_$][\w$]*(\.[A-Za-z_$][\w$]*|\[[^\[\]]+\])*$/
 
 export function compileProps (el, propOptions, vm) {
   var props = []
+  var propsData = vm.$options.propsData
   var names = Object.keys(propOptions)
   var i = names.length
   var options, name, attr, value, path, parsed, prop
@@ -122,6 +123,9 @@ export function compileProps (el, propOptions, vm) {
     } else if ((value = getAttr(el, attr)) !== null) {
       // has literal binding!
       prop.raw = value
+    } else if (propsData && ((value = propsData[name] || propsData[path]) !== null)) {
+      // has propsData
+      prop.raw = value
     } else if (process.env.NODE_ENV !== 'production') {
       // check possible camelCase prop usage
       var lowerCaseName = path.toLowerCase()

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

@@ -621,6 +621,36 @@ describe('prop', function () {
     expect(vm.a).toBe(123)
   })
 
+  // # GitHub issues #3183
+  it('pass propsData to create component that props is defined', function () {
+    var Comp = Vue.extend({
+      template: '<div>{{propA.a}}:{{propB.b}}</div>',
+      props: {
+        propA: {
+          type: Object,
+          required: true
+        },
+        'prop-b': {
+          type: Object,
+          required: true
+        }
+      }
+    })
+    var vm = new Comp({
+      el: el,
+      propsData: {
+        propA: { a: 123 },
+        propB: { b: '456' }
+      }
+    })
+    expect(vm.propA.a).toBe(123)
+    expect(vm.propB.b).toBe('456')
+    expect('Missing required prop: propA').not.toHaveBeenWarned()
+    expect('Invalid prop: type check failed for prop "propA". Expected Object, got Undefined').not.toHaveBeenWarned()
+    expect('Missing required prop: prop-b').not.toHaveBeenWarned()
+    expect('Invalid prop: type check failed for prop "prop-b". Expected Object, got Undefined').not.toHaveBeenWarned()
+  })
+
   it('should warn using propsData during extension', function () {
     Vue.extend({
       propsData: {