Browse Source

keep-alive re-activated component should get updated props (fix #4237)

Evan You 9 years ago
parent
commit
b60cd83466

+ 3 - 0
src/core/vdom/create-component.js

@@ -154,6 +154,9 @@ function init (vnode: VNodeWithData, hydrating: boolean) {
   if (!vnode.child || vnode.child._isDestroyed) {
     const child = vnode.child = createComponentInstanceForVnode(vnode, activeInstance)
     child.$mount(hydrating ? vnode.elm : undefined, hydrating)
+  } else if (vnode.data.keepAlive) {
+    // kept-alive components, treat as a patch
+    prepatch(vnode, vnode)
   }
 }
 

+ 32 - 0
test/unit/features/component/component-keep-alive.spec.js

@@ -107,6 +107,38 @@ describe('Component keep-alive', () => {
     }).then(done)
   })
 
+  // #4237
+  it('should update latest props/listners for a re-activated component', done => {
+    const one = {
+      props: ['prop'],
+      template: `<div>one {{ prop }}</div>`
+    }
+    const two = {
+      props: ['prop'],
+      template: `<div>two {{ prop }}</div>`
+    }
+    const vm = new Vue({
+      data: { view: 'one', n: 1 },
+      template: `
+        <div>
+          <keep-alive>
+            <component :is="view" :prop="n"></component>
+          </keep-alive>
+        </div>
+      `,
+      components: { one, two }
+    }).$mount()
+
+    expect(vm.$el.textContent).toBe('one 1')
+    vm.n++
+    waitForUpdate(() => {
+      expect(vm.$el.textContent).toBe('one 2')
+      vm.view = 'two'
+    }).then(() => {
+      expect(vm.$el.textContent).toBe('two 2')
+    }).then(done)
+  })
+
   if (!isIE9) {
     it('with transition-mode out-in', done => {
       let next