fix(template-ref): fix string template refs inside slots

packages/compiler-core/__tests__/transforms/transformRef.spec.ts

@@ -0,0 +1,49 @@
+import { baseParse as parse } from '../../src/parse'
+import { transform } from '../../src/transform'
+import { transformRef } from '../../src/transforms/transformRef'
+import { ElementNode, NodeTypes } from '../../src/ast'
+
+function transformWithRef(template: string) {
+  const ast = parse(template)
+  transform(ast, {
+    nodeTransforms: [transformRef]
+  })
+  return ast.children[0] as ElementNode
+}
+
+describe('compiler: transform ref', () => {
+  const getExpected = (key: any) => ({
+    type: NodeTypes.DIRECTIVE,
+    name: 'bind',
+    arg: {
+      type: NodeTypes.SIMPLE_EXPRESSION,
+      content: `ref`
+    },
+    exp: {
+      type: NodeTypes.COMPOUND_EXPRESSION,
+      children: [`[_ctx, `, key, `]`]
+    }
+  })
+
+  test('static', () => {
+    const node = transformWithRef(`<div ref="test"/>`)
+    expect(node.props[0]).toMatchObject(
+      getExpected({
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: `test`,
+        isStatic: true
+      })
+    )
+  })
+
+  test('dynamic', () => {
+    const node = transformWithRef(`<div :ref="test"/>`)
+    expect(node.props[0]).toMatchObject(
+      getExpected({
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: `test`,
+        isStatic: false
+      })
+    )
+  })
+})

packages/compiler-core/src/compile.ts

@@ -4,6 +4,7 @@ import { transform, NodeTransform, DirectiveTransform } from './transform'
 import { generate, CodegenResult } from './codegen'
 import { RootNode } from './ast'
 import { isString } from '@vue/shared'
+import { transformRef } from './transforms/transformRef'
 import { transformIf } from './transforms/vIf'
 import { transformFor } from './transforms/vFor'
 import { transformExpression } from './transforms/transformExpression'
@@ -27,6 +28,7 @@ export function getBaseTransformPreset(
 ): TransformPreset {
   return [
     [
+      transformRef,
       transformOnce,
       transformIf,
       transformFor,

packages/compiler-core/src/transforms/transformRef.ts

@@ -0,0 +1,40 @@
+import { NodeTransform } from '../transform'
+import {
+  NodeTypes,
+  ElementTypes,
+  createSimpleExpression,
+  createCompoundExpression
+} from '../ast'
+import { findProp } from '../utils'
+
+// Convert ref="foo" to `:ref="[_ctx, 'foo']"` so that the ref contains the
+// correct owner instance even inside slots.
+export const transformRef: NodeTransform = node => {
+  if (
+    !(
+      node.type === NodeTypes.ELEMENT &&
+      (node.tagType === ElementTypes.ELEMENT ||
+        node.tagType === ElementTypes.COMPONENT)
+    )
+  ) {
+    return
+  }
+  const ref = findProp(node, 'ref')
+  if (!ref) return
+  const refKey =
+    ref.type === NodeTypes.ATTRIBUTE
+      ? ref.value
+        ? createSimpleExpression(ref.value.content, true, ref.value.loc)
+        : null
+      : ref.exp
+  if (refKey) {
+    node.props[node.props.indexOf(ref)] = {
+      type: NodeTypes.DIRECTIVE,
+      name: `bind`,
+      arg: createSimpleExpression(`ref`, true, ref.loc),
+      exp: createCompoundExpression([`[_ctx, `, refKey, `]`]),
+      modifiers: [],
+      loc: ref.loc
+    }
+  }
+}