fix(compiler-sfc): fix template usage check edge case for v-on statements

ref: https://github.com/vuejs/vue/issues/12591

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 1a48a8f8ebecd13ef8f08f86ac5c84b9fd4a438d..08d404b9c162c38ee6f5b8a02e39fc0120b3a3fc 100644 (file)
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -461,6 +461,19 @@ defineExpose({ foo: 123 })
       expect(content).toMatch(`return { a, b, Baz }`)
       assertCode(content)
     })
+
+    // vuejs/vue#12591
+    test('v-on inline statement', () => {
+      // should not error
+      compile(`
+      <script setup lang="ts">
+        import { foo } from './foo'
+      </script>
+      <template>
+        <div @click="$emit('update:a');"></div>
+      </tempalte>
+      `)
+    })
   })
 
   describe('inlineTemplate mode', () => {

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 58eff6868d74f13fdf00f27db2156098640c27ec..5a77e8a946300327f810c2a6691f1a791ecca967 100644 (file)
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -2134,6 +2134,8 @@ function processExp(exp: string, dir?: string): string {
   if (/ as\s+\w|<.*>|:/.test(exp)) {
     if (dir === 'slot') {
       exp = `(${exp})=>{}`
+    } else if (dir === 'on') {
+      exp = `()=>{${exp}}`
     } else if (dir === 'for') {
       const inMatch = exp.match(forAliasRE)
       if (inMatch) {