组件上传递的事件会自动绑定到组件内部所有元素上

packages/runtime-core/__tests__/apiSetupContext.spec.ts

@@ -206,4 +206,36 @@ describe('api: setup context', () => {
     await nextTick()
     expect(serializeInner(root)).toMatch(`<div>1</div>`)
   })
+
+  it('组件外部传进来的事件会绑定到组件内的所有dom上', async () => {
+    //这个测试时没有问题的 但是我在实际使用过程中 确实会出现
+    const count = ref(0)
+    const div1 = ref(null)
+    const div2 = ref(null)
+    const Parent = {
+      render: () =>
+        h(Child, {
+          onClick: () => count.value++
+        })
+    }
+
+    const Child = createComponent({
+      props: {},
+      setup(props) {
+        return () =>
+          h('div', [h('div', { ref: div1 }), h('div', { ref: div2 })])
+      }
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    await nextTick()
+
+    triggerEvent((div1.value as unknown) as TestElement, 'click')
+    expect(count.value).toBe(0)
+    // expect(count.value).toBe(1)
+    triggerEvent((div2.value as unknown) as TestElement, 'click')
+    expect(count.value).toBe(0)
+    // expect(count.value).toBe(2)
+  })
 })

packages/vue/examples/todomvc-composition.html

@@ -2,6 +2,7 @@
 <link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css">
 
 <div id="app">
+  <child @click="click" ></child>
   <section class="todoapp">
     <header class="header">
       <h1>todos</h1>
@@ -53,7 +54,7 @@ <h1>todos</h1>
 </div>
 
 <script>
-const { createApp, reactive, computed, watch, onMounted, onUnmounted } = Vue
+const { createApp, reactive, computed, watch, onMounted,h, onUnmounted } = Vue
 
 const STORAGE_KEY = 'todos-vuejs-3.x'
 const todoStorage = {
@@ -90,7 +91,19 @@ <h1>todos</h1>
   return n === 1 ? 'item' : 'items'
 }
 
+const child = {
+  props:{},
+  setup(){
+    return ()=> h("div", {},[
+        h("button", { id: "div1" }, "button"),
+        h("button", { id: "div2" }, "button"),
+        h("button", { id: "div3" }, "button"),
+        h("button", { id: "div4" }, "button")
+      ]);
+  }
+}
 const App = {
+  components: {child},
   setup () {
     const state = reactive({
       todos: todoStorage.fetch(),
@@ -184,13 +197,17 @@ <h1>todos</h1>
       state.todos = filters.active(state.todos)
     }
 
+    function click(){
+      console.log('没有绑定事件的dom触发了事件');
+    }
     return {
       state,
       addTodo,
       removeTodo,
       editTodo,
       doneEdit,
       cancelEdit,
+      click,
       removeCompleted
     }
   },