Inicio Explorar Ayuda
Registro Iniciar sesión
vuejs
/
vue
espejo de https://github.com/vuejs/vue.git
2
0
Fork 0
Archivos Incidencias 0 Wiki
Explorar el Código

hook inheritance

Evan You hace 12 años
padre
fede1eb80e
commit
ea34d5692a
Se han modificado 3 ficheros con 56 adiciones y 9 borrados
Unificar vista Mostrar estadísticas de diff
  1. 28 7
      src/main.js
  2. 22 0
      test/functional/fixtures/extend.html
  3. 6 2
      test/functional/specs/extend.js

+ 28 - 7
src/main.js
Ver fichero 

@@ -74,9 +74,11 @@ function extend (options) {
 
     options = inheritOptions(options, ParentVM.options, true)
 
     options = inheritOptions(options, ParentVM.options, true)
 
     utils.processOptions(options)
 
     utils.processOptions(options)
 
 
 
-    var ExtendedVM = function (opts) {
 
-        opts = inheritOptions(opts, options, true)
 
-        ParentVM.call(this, opts)
 
+    var ExtendedVM = function (opts, asParent) {
 
+        if (!asParent) {
 
+            opts = inheritOptions(opts, options, true)
 
+        }
 
+        ParentVM.call(this, opts, true)
 
     }
 
     }
 
 
 
     // inherit prototype props
 
     // inherit prototype props
 
@@ -118,15 +120,34 @@ function inheritOptions (child, parent, topLevel) {
 
     if (!parent) return child
 
     if (!parent) return child
 
     for (var key in parent) {
 
     for (var key in parent) {
 
         if (key === 'el' || key === 'proto') continue
 
         if (key === 'el' || key === 'proto') continue
 
-        if (!child[key]) { // child has priority
 
-            child[key] = parent[key]
 
-        } else if (topLevel && utils.typeOf(child[key]) === 'Object') {
 
-            inheritOptions(child[key], parent[key], false)
 
+        var val = child[key],
 
+            parentVal = parent[key],
 
+            type = utils.typeOf(val)
 
+        if (topLevel && type === 'Function' && parentVal) {
 
+            // merge hook functions
 
+            child[key] = mergeHook(val, parentVal)
 
+        } else if (topLevel && type === 'Object') {
 
+            // merge toplevel object options
 
+            inheritOptions(val, parentVal)
 
+        } else if (val === undefined) {
 
+            // inherit if child doesn't override
 
+            child[key] = parentVal
 
         }
 
         }
 
     }
 
     }
 
     return child
 
     return child
 
 }
 
 }
 
 
 
+/**
 
+ *  Merge hook functions
 
+ *  so parent hooks also get called
 
+ */
 
+function mergeHook (fn, parentFn) {
 
+    return function (opts) {
 
+        parentFn.call(this, opts)
 
+        fn.call(this, opts)
 
+    }
 
+}
 
+
 
 /**
 
 /**
 
  *  Update prefix for some special directives
 
  *  Update prefix for some special directives
 
  *  that are used in compilation.
 
  *  that are used in compilation.

+ 22 - 0
test/functional/fixtures/encapsulation.html → test/functional/fixtures/extend.html
Ver fichero 

@@ -6,6 +6,7 @@
 
         <script src="../../../dist/vue.js"></script>
 
         <script src="../../../dist/vue.js"></script>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
+        <div id="log"></div>
 
         <div id="test">
 
         <div id="test">
 
             <div class="dir" v-hola="dirMsg"></div>
 
             <div class="dir" v-hola="dirMsg"></div>
 
             <div class="filter">{{filterMsg | nodigits}}</div>
 
             <div class="filter">{{filterMsg | nodigits}}</div>
 
@@ -13,8 +14,18 @@
 
             <div class="vm" v-component="vm-test">{{vmMsg}}</div>
 
             <div class="vm" v-component="vm-test">{{vmMsg}}</div>
 
             <div class="vm-w-model" v-component="vm-w-model:vmData">{{msg + model.msg}}</div>
 
             <div class="vm-w-model" v-component="vm-w-model:vmData">{{msg + model.msg}}</div>
 
         </div>
 
         </div>
 
+        <div id="child">
 
+            <div class="cvm" v-component="vm-test">{{vmMsg}}</div>
 
+        </div>
 
         <script>
 
         <script>
 
+            var log = document.getElementById('log')
 
             var T = Vue.extend({
 
             var T = Vue.extend({
 
+                created: function () {
 
+                    log.textContent += ' T created'  
+                },
 
+                ready: function () {
 
+                    log.textContent += ' T ready'
 
+                },
 
                 components: {
 
                 components: {
 
                     'vm-test': {
 
                     'vm-test': {
 
                         scope: {
 
                         scope: {
 
@@ -41,6 +52,14 @@
 
                     }
 
                     }
 
                 }
 
                 }
 
             })
 
             })
 
+            var C = T.extend({
 
+                created: function () {
 
+                    log.textContent += ' C created'  
+                },
 
+                ready: function () {
 
+                    log.textContent += ' C ready'
 
+                }
 
+            })
 
             new T({
 
             new T({
 
                 el: '#test',
 
                 el: '#test',
 
                 scope: {
 
                 scope: {
 
@@ -52,6 +71,9 @@
 
                     }
 
                     }
 
                 }
 
                 }
 
             })
 
             })
 
+            new C({
 
+                el: '#child'
 
+            })
 
         </script>
 
         </script>
 
     </body>
 
     </body>
 
 </html>
 
 </html>

+ 6 - 2
test/functional/specs/encapsulation.js → test/functional/specs/extend.js
Ver fichero 

@@ -1,12 +1,16 @@
 
-casper.test.begin('Component Encapsulation', 5, function (test) {
 
+casper.test.begin('Encapsulation & Inheritance', 7, function (test) {
 
     
     
     casper
 
     casper
 
-    .start('./fixtures/encapsulation.html', function () {
 
+    .start('./fixtures/extend.html', function () {
 
+
 
         test.assertSelectorHasText('.dir', 'directive works')
 
         test.assertSelectorHasText('.dir', 'directive works')
 
         test.assertSelectorHasText('.filter', 'filter works')
 
         test.assertSelectorHasText('.filter', 'filter works')
 
         test.assertSelectorHasText('.partial', 'partial works')
 
         test.assertSelectorHasText('.partial', 'partial works')
 
         test.assertSelectorHasText('.vm', 'component works')
 
         test.assertSelectorHasText('.vm', 'component works')
 
         test.assertSelectorHasText('.vm-w-model', 'component with model works')
 
         test.assertSelectorHasText('.vm-w-model', 'component with model works')
 
+
 
+        test.assertSelectorHasText('#log', 'T created T ready T created C created T ready C ready', 'hook inheritance works')
 
+        test.assertSelectorHasText('.cvm', 'component works', 'Child should have access to Parent options')
 
     })
 
     })
 
     .run(function () {
 
     .run(function () {
 
         test.done()
 
         test.done()