vue DOM加载完成后，利用@click追加按钮，其追加按钮的位置信息改为组件位置！！求解！！

术语不是很专业，不知处望教导。
接下来简述问题：

img


上面是vue里面的html主页--

img


上面app.vue组件。
1、如上1、2图为了测试，我在主页的js和组件method里面，分别写了一个bt方法。
2、然后在主页另一个js里面，用createAPP函数创建SAP实列，再挂载到 div .app的元素上。

img


页面运行内容就是这样的，当点击123按钮时，会弹窗，同时会在其兄弟节点 div .d 的内部新增一个button的子节点。

img

img

img


测试通过 事件监听器里发现，“123”按钮和后续增加的“点击”按钮，其事件是不一样的。
“123”按钮点击，执行的是 app组件里面的bt方法。
“点击”按钮点击，执行的是index主页 js里的bt方法。

img


1、或许会觉得“点击”按钮用的是 onclick，而“123”按钮用的是@click。
2、但其实，即便 “点击”按钮用的也是@click，也是引用不到 app组件里面的bt方法，反而还会无法引用到 index主页里面的bt方法。
$、所以问题就是，有没有什么方法，对于这种BOM加载完成后，再后续二次添加的元素节点。另其的归属不属于主页，而是属于app组件。
$、点击后不让它执行 index里面的bt方法，而是让其执行 app组件里面的 bt方法。

【以下回答由 GPT 生成】

我可以理解你的问题是如何在Vue的DOM加载完成后，通过@click来追加按钮并将其放在组件位置上。由于Vue组件是动态渲染的，所以在DOM加载完成后添加的按钮无法直接绑定到组件上。下面是我提供的一种解决方案：

  1. 首先，在主页的JavaScript文件中，通过createApp函数创建Vue实例，并将其挂载到id为"app"的元素上。示例如下：
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
  1. 在组件的方法中定义名为bt的方法，作为点击事件的处理程序。在组件中，可以通过@click来绑定这个方法。示例如下：
<template>
  <!-- 组件的内容 -->
  <div>
    <button @click="bt">123</button>
    <div class="d">
      <!-- 这里是动态添加的按钮 -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    bt() {
      // 处理点击事件的逻辑
      console.log('点击了按钮123');
    }
  }
}
</script>
  1. 在组件的方法中，使用Vue的动态渲染功能来添加按钮。通过this.$nextTick方法可以确保DOM已加载完成。示例如下：
<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const button = document.createElement('button');
      button.innerText = '点击';
      button.addEventListener('click', this.bt);
      document.querySelector('.d').appendChild(button);
    });
  },
  methods: {
    bt() {
      console.log('点击了动态添加的按钮');
    }
  }
}
</script>

这样，在Vue的DOM加载完成后，会自动在组件中添加一个按钮，并将其放在.d的内部。这个按钮的点击事件会执行组件中的bt方法。

希望这个解决方案对你有帮助。如果你需要进一步的优化建议，请提供更多的上下文信息和项目要求。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

这种不都是 组件传参 。把 用到的事件传给子组件 。子组件 props.传过来的事件 调用

在用app用this.$on监听，然后在子组件用this.$emit触发看看

<template>
我是第一个appss
<a href="#">1345</a>
<button @click="bt">123</button>
<div id="d">
<button @click="bt" v-if="isRenderButton">123</button>
</div>
</template>
<script>
export default {
data(){
return {
    isRenderButton: false
}
},
methods:{
bt(){
alert("组件函数”);
this.isRenderButton = true;
}
}
}
</script>