Vue警告无法找到#app-address2元素：复用子组件app-address2遇问题

这个报错太典型了！问题核心是你把app-address2从独立根组件改成子组件使用，但代码里还保留了它作为独立根组件的挂载逻辑，导致Vue找不到对应的DOM元素。下面一步步帮你修复：

1. 移除app-address2的独立挂载代码 #

打开你的address.component2.js，里面肯定有一段类似这样的代码（用来把它作为根组件挂载）：

// 需要删掉的错误代码
new Vue({
  el: '#app-address2',
  // 其他配置项
})

现在app-address2是子组件，不需要单独挂载到DOM上，只需要保留组件的定义部分即可，比如：

// 正确的子组件定义
Vue.component('app-address2', {
  template: `<!-- 你的组件模板内容 -->`,
  props: [], // 按需定义父组件传递的属性
  data() {
    return { /* 组件内部数据 */ }
  },
  methods: { /* 组件方法 */ }
})

2. 在父组件中正确使用子组件 #

确保delivery-creation2组件能识别app-address2：

• 如果是全局注册（像上面用Vue.component定义的app-address2），直接在delivery-creation2的模板里添加<app-address2></app-address2>就行：

Vue.component('delivery-creation2', {
  template: `
    <div class="delivery-creation">
      <!-- 父组件其他内容 -->
      <app-address2></app-address2>
    </div>
  `,
  // 父组件的其他配置
})

• 如果是局部注册（更推荐的方式），需要在delivery-creation2的components选项中声明子组件：

// 先引入app-address2的组件定义（如果是模块化开发的话）
// import AppAddress2 from './address.component2.js'

Vue.component('delivery-creation2', {
  template: `
    <div class="delivery-creation">
      <app-address2></app-address2>
    </div>
  `,
  components: {
    'app-address2': AppAddress2 // 关联子组件定义
  }
})

3. 确认父组件的挂载逻辑正确 #

在delivery-creation.component2.js里，确保父组件是挂载到主HTML中存在的#app-delivery-creation2元素上：

new Vue({
  el: '#app-delivery-creation2'
})

额外注意：脚本引入顺序 #

主HTML里的脚本顺序要正确，必须保证：

• 先引入Vue核心库
• 再引入子组件address.component2.js
• 最后引入父组件delivery-creation.component2.js

这样就能确保子组件先注册完成，再被父组件使用啦！

内容的提问来源于stack exchange，提问作者masber