fix(v3): dynamic ref #1458

packages/uni-template-compiler/__tests__/compiler-app-plus-extra.service.spec.js

@@ -153,5 +153,12 @@ describe('codegen', () => {
       `with(this){return _c('base-layout',{attrs:{"_i":0},scopedSlots:_u([{key:_$s(1,'st',dynamicSlotName),fn:function(_empty_, _svm, _si){return undefined}}],null,true)})}`
     )
   })
+
+  it('generate ref', () => {
+    assertCodegen(
+      '<p :ref="component1"></p>',
+      `with(this){return _c('p',{ref:_$s(0,'ref',component1)})}`
+    )
+  })
 })
 /* eslint-enable quotes */

packages/uni-template-compiler/__tests__/compiler-app-plus-extra.view.spec.js

@@ -93,6 +93,12 @@ describe('codegen', () => {
       '<base-layout><template v-slot:[dynamicSlotName]></template></base-layout>',
       `with(this){return _c('base-layout',{attrs:{"_i":0},scopedSlots:_u([{key:_$g(1,'st'),fn:function(_empty_, _svm, _si){return undefined}}],null,true)})}`
     )
+  })
+  it('generate ref', () => {
+    assertCodegen(
+      '<p :ref="component1"></p>',
+      `with(this){return _c('p',{ref:_$g(0,'ref'),attrs:{"_i":0}})}`
+    )
   })
 })
 /* eslint-enable quotes */

packages/uni-template-compiler/lib/app/parser/base-parser.js

 const {
   ID,
   C_IS,
+  C_REF,
   V_IF,
   V_FOR,
   V_ELSE_IF,
@@ -9,6 +10,12 @@ const {
 
 const parseTextExpr = require('./text-parser')
 
+function parseRef (el, genVar) {
+  if (el.ref && isVar(el.ref)) {
+    el.ref = genVar(C_REF, el.ref)
+  }
+}
+
 function parseIs (el, genVar) {
   if (!el.component) {
     return
@@ -97,7 +104,8 @@ function parseText (el, parent, state) {
 }
 
 module.exports = {
-  parseIs,
+  parseIs,
+  parseRef,
   parseIf,
   parseFor,
   parseText,

packages/uni-template-compiler/lib/app/service.js

@@ -17,6 +17,7 @@ const {
 
 const {
   parseIs,
+  parseRef,
   parseIf,
   parseFor,
   parseText,
@@ -130,6 +131,7 @@ function transformNode (el, parent, state, isScopedSlot) {
   const genVar = createGenVar(el.attrsMap[ID], isScopedSlot)
 
   parseIs(el, genVar)
+  parseRef(el, genVar)
   parseFor(el, createGenVar, isScopedSlot, checkAutoFill(el))
   parseKey(el, isScopedSlot)
 
@@ -162,10 +164,10 @@ function postTransformNode (el, options) {
     } else {
       options.root = el
     }
-    traverseNode(el, false, {
+    traverseNode(el, false, {
       createGenVar,
       forIteratorId: 0,
-      transformNode,
+      transformNode,
       filterModules: options.filterModules
     })
     optimize(el, options)

packages/uni-template-compiler/lib/app/util.js

@@ -13,6 +13,8 @@ const SET_MP_CLASS = '_$smc'
 const GET_CHANGE_DATA = '_$gc' // wxs
 
 const C_IS = 'is'
+const C_SLOT_TARGET = 'st'
+const C_REF = 'ref'
 
 const V_FOR = 'f'
 const V_IF = 'i'
@@ -208,7 +210,7 @@ function traverseNode (el, parent, state, isScopedSlot) {
     state.childIndex = index
     slot.slotScope = `${slot.slotScope}, _svm, _si`
     if (slot.slotTargetDynamic && slot.slotTarget) {
-      slot.slotTarget = state.createGenVar(slot.attrsMap[ID])('st', slot.slotTarget)
+      slot.slotTarget = state.createGenVar(slot.attrsMap[ID])(C_SLOT_TARGET, slot.slotTarget)
     }
     traverseNode(slot, el, state, true)
   })
@@ -256,6 +258,7 @@ function addHandler (el, name, value, important) {
 
 module.exports = {
   C_IS,
+  C_REF,
   V_FOR,
   V_IF,
   V_ELSE_IF,

packages/uni-template-compiler/lib/app/view.js

@@ -11,7 +11,8 @@ const {
 } = require('./util')
 
 const {
-  parseIs,
+  parseIs,
+  parseRef,
   parseIf,
   parseFor,
   parseText,
@@ -126,7 +127,7 @@ function transformNode (el, parent, state, isScopedSlot) {
   const genVar = createGenVar(el.attrsMap[ID], isScopedSlot)
 
   parseIs(el, genVar)
-
+  parseRef(el, genVar)
   if (parseFor(el, createGenVar, isScopedSlot)) {
     if (el.alias[0] === '{') { // <div><li v-for=" { a, b }  in items"></li></div>
       el.alias = '$item'
@@ -161,7 +162,7 @@ function postTransformNode (el, options) {
     } else {
       options.root = el
     }
-    traverseNode(el, false, {
+    traverseNode(el, false, {
       createGenVar,
       forIteratorId: 0,
       transformNode,
@@ -242,4 +243,4 @@ module.exports = {
   },
   postTransformNode,
   genData
-}
+}