Просмотр исходного кода

warn data field already defined as a prop

Evan You 10 лет назад
Родитель
Сommit
3d3eaeaa63
4 измененных файлов с 30 добавлено и 9 удалено
  1. 5 4
      examples/grid/grid.js
  2. 3 1
      examples/tree/tree.js
  3. 9 4
      src/instance/scope.js
  4. 13 0
      test/unit/specs/directives/prop_spec.js

+ 5 - 4
examples/grid/grid.js

@@ -2,17 +2,18 @@
 Vue.component('demo-grid', {
   template: '#grid-template',
   replace: true,
-  props: ['data', 'columns', 'filter-key'],
+  props: {
+    data: Array,
+    columns: Array,
+    filterKey: String
+  },
   data: function () {
     var reversed = {}
     this.columns.forEach(function (key) {
       reversed[key] = false
     })
     return {
-      data: null,
-      columns: null,
       sortKey: '',
-      filterKey: '',
       reversed: reversed
     }
   },

+ 3 - 1
examples/tree/tree.js

@@ -30,9 +30,11 @@ var data = {
 
 // define the item component
 Vue.component('item', {
-  props: ['model'],
   template: '#item-template',
   replace: true,
+  props: {
+    model: Object
+  },
   data: function () {
     return {
       open: false

+ 9 - 4
src/instance/scope.js

@@ -53,10 +53,15 @@ exports._initData = function () {
   if (optionsData) {
     this._data = optionsData
     for (var prop in propsData) {
-      if (
-        this._props[prop].raw !== null ||
-        !optionsData.hasOwnProperty(prop)
-      ) {
+      if (process.env.NODE_ENV !== 'production' &&
+          optionsData.hasOwnProperty(prop)) {
+        _.warn(
+          'Data field "' + prop + '" is already defined ' +
+          'as a prop. Use prop default value instead.'
+        )
+      }
+      if (this._props[prop].raw !== null ||
+          !optionsData.hasOwnProperty(prop)) {
         optionsData.$set(prop, propsData[prop])
       }
     }

+ 13 - 0
test/unit/specs/directives/prop_spec.js

@@ -495,6 +495,19 @@ if (_.inBrowser) {
       })
     })
 
+    it('should warn data fields already defined as a prop', function () {
+      new Vue({
+        el: el,
+        props: {
+          a: null
+        },
+        data: {
+          a: 1
+        }
+      })
+      expect(hasWarned(_, 'already defined as a prop')).toBe(true)
+    })
+
     it('should not warn for non-required, absent prop', function () {
       new Vue({
         el: el,