Vue.js嵌套组件创建方法及自定义Demo失效问题求助

我来帮你排查下代码里的问题，顺便给你理清楚Vue中嵌套组件的正确打开方式～

你的代码问题分析 #

1. 组件作用域错误：你把component-b注册成了component-a的局部组件，这意味着component-b只能在component-a自己的模板内部使用，而你却在component-a的<slot>内容里调用它——slot内容属于父Vue实例的作用域，根本找不到这个局部注册的component-b。
2. 脚本加载顺序问题：你把Vue的CDN脚本放在了DOM之后，但组件注册和Vue实例初始化代码却写在脚本之前，这会导致执行代码时Vue还没加载完成，而且#app元素也可能还没被浏览器解析。

修复后的Demo代码 #

下面给你两种可行的修复方案，根据你的需求选择：

方案1：全局注册子组件

如果component-b需要在多个地方使用，全局注册更方便：

<!DOCTYPE html>
<html>
<head>
  <title>Vue Nested Components</title>
</head>
<body>
  <div id="app">
    <component-a>
      <component-b></component-b>
    </component-a>
  </div>

  <!-- 先加载Vue库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script>
    // 全局注册component-b
    Vue.component('component-b', {
      template: '<div>Hello</div>'
    });

    // 再注册component-a
    Vue.component('component-a', {
      template: '<div><span>Hi</span><slot></slot></div>'
    });

    // 最后初始化Vue实例
    new Vue({
      el: '#app'
    });
  </script>
</body>
</html>

方案2：局部注册到根实例

如果component-b只在根实例的模板里用，局部注册到根实例即可：

<!DOCTYPE html>
<html>
<head>
  <title>Vue Nested Components</title>
</head>
<body>
  <div id="app">
    <component-a>
      <component-b></component-b>
    </component-a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script>
    Vue.component('component-a', {
      template: '<div><span>Hi</span><slot></slot></div>'
    });

    new Vue({
      el: '#app',
      // 在根实例里局部注册component-b
      components: {
        'component-b': {
          template: '<div>Hello</div>'
        }
      }
    });
  </script>
</body>
</html>

嵌套组件的核心要点 #

• 局部组件作用域：局部注册的组件只能在它的父组件模板内使用，slot内容不属于父组件模板，是父作用域的内容，所以要确保slot里用的组件在父作用域能访问到。
• 脚本顺序：必须先加载Vue库，再写组件注册和实例初始化的代码，同时要保证el对应的DOM元素已经存在（把脚本放在</body>前最稳妥）。
• 组件内部嵌套：如果你想在component-a内部直接嵌套component-b，可以直接把component-b写在component-a的模板里，这种情况下局部注册就完全没问题：

Vue.component('component-a', {
  template: '<div><span>Hi</span><component-b></component-b></div>',
  components: {
    'component-b': {
      template: '<div>Hello</div>'
    }
  }
});

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