현재 버전

"지역 등록된 컴포넌트는 하위컴포넌트에서는 사용이 불가능하다"

=> 전 그냥 전역등록과는 다르게 하나하나 선언해서 사용해야 한다라고 이해하고 있습니다.

우선  localComp1과 localComp2의 순서를 바꿔줘야 됩니다.


추가로 template이 string 으로 되어 있으니 runtime+compiler 옵션을 켜줘야 합니다.

  • https://kr.vuejs.org/v2/guide/installation.html#%EB%9F%B0%ED%83%80%EC%9E%84-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC%EC%99%80-%EB%9F%B0%ED%83%80%EC%9E%84%EC%9D%98-%EC%B0%A8%EC%9D%B4


vue-cli를 사용하신 거면 vue.config.js파일에서 runtimeCompiler 옵션을 켜시면 됩니다. (기본값 false)

  • https://cli.vuejs.org/config/#runtimecompiler
  • https://doitnow-man.tistory.com/category/%EB%82%B4%EB%A7%98%EB%8C%80%EB%A1%9C%20Study/Vuetify


CDN 으로 하신 거면 그냥 순서만 바꿔주니 되네요. CDN 버젼은 기본적으로 compiler가 포함되어 있어서인가 봅니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="test">
      <local1>
        <!-- <local2></local2> -->
      </local1>
    </div>

    <script>
      var localComp2 = {
        template: "<div>지역컴포넌트 2</div>"
      };

      var localComp1 = {
        template: "<div>지역컴포넌트 1<local2></local2></div>",
        components: {
          local2: localComp2
        }
      };
      let app = new Vue({
        el: "#test",
        components: {
          local1: localComp1,
          local2: localComp2
        }
      });
    </script>
  </body>
</html>

수정 이력

2021-06-14 10:56:55 에 아래 내용에서 변경 됨 #4

"지역 등록된 컴포넌트는 하위컴포넌트에서는 사용이 불가능하다"

=> 전 그냥 전역등록과는 다르게 하나하나 선언해서 사용해야 한다라고 이해하고 있습니다.


위 동작이 안되는 것은 런타임 컴파일러 옵션이 안켜져인 것 같고요.

https://kr.vuejs.org/v2/guide/installation.html#%EB%9F%B0%ED%83%80%EC%9E%84-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC%EC%99%80-%EB%9F%B0%ED%83%80%EC%9E%84%EC%9D%98-%EC%B0%A8%EC%9D%B4


vue-cli를 사용하신 거면 vue.config.js파일에서 runtimeCompiler 옵션을 켜시면 됩니다. (기본값 false)

https://cli.vuejs.org/config/#runtimecompiler


CDN 같은걸로 하신 거면 순서를 바꿔주니 되네요.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="test">
      <local1>
        <!-- <local2></local2> -->
      </local1>
    </div>

    <script>
      var localComp2 = {
        template: "<div>지역컴포넌트 2</div>"
      };

      var localComp1 = {
        template: "<div>지역컴포넌트 1<local2></local2></div>",
        components: {
          local2: localComp2
        }
      };
      let app = new Vue({
        el: "#test",
        components: {
          local1: localComp1,
          local2: localComp2
        }
      });
    </script>
  </body>
</html>
2021-06-14 10:36:49 에 아래 내용에서 변경 됨 #3

"지역 등록된 컴포넌트는 하위컴포넌트에서는 사용이 불가능하다"

=> 전 그냥 전역등록과는 다르게 하나하나 선언해서 사용해야 한다라고 이해하고 있습니다.


위 동작이 안되는 것은 런타임 컴파일러 옵션이 안켜져인 것 같고요.

https://kr.vuejs.org/v2/guide/installation.html#%EB%9F%B0%ED%83%80%EC%9E%84-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC%EC%99%80-%EB%9F%B0%ED%83%80%EC%9E%84%EC%9D%98-%EC%B0%A8%EC%9D%B4


vue-cli를 사용하신 거면 vue.config.js파일에서 runtimeCompiler 옵션을 켜시면 됩니다. (기본값 false)

https://cli.vuejs.org/config/#runtimecompiler


CDN 같은걸로 하시면 순서를 바꿔주니 되네요.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="test">
      <local1>
        <!-- <local2></local2> -->
      </local1>
    </div>

    <script>
      var localComp2 = {
        template: "<div>지역컴포넌트 2</div>"
      };

      var localComp1 = {
        template: "<div>지역컴포넌트 1<local2></local2></div>",
        components: {
          local2: localComp2
        }
      };
      let app = new Vue({
        el: "#test",
        components: {
          local1: localComp1,
          local2: localComp2
        }
      });
    </script>
  </body>
</html>
2021-06-14 10:36:34 에 아래 내용에서 변경 됨 #2

"지역 등록된 컴포넌트는 하위컴포넌트에서는 사용이 불가능하다"

=> 전 그냥 전역등록과는 다르게 하나하나 선언해서 사용해야 한다라고 이해하고 있습니다.


위 동작이 안되는 것은 런타임 컴파일러 옵션이 안켜져인 것 같고요.

https://kr.vuejs.org/v2/guide/installation.html#%EB%9F%B0%ED%83%80%EC%9E%84-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC%EC%99%80-%EB%9F%B0%ED%83%80%EC%9E%84%EC%9D%98-%EC%B0%A8%EC%9D%B4


vue-cli를 사용하신 거면 vue.config.js파일에서 runtimeCompiler 옵션을 켜시면 됩니다. (기본값 false)

https://cli.vuejs.org/config/#runtimecompiler

2021-06-14 10:25:37 에 아래 내용에서 변경 됨 #1

원 질

"지역 등록된 컴포넌트는 하위컴포넌트에서는 사용이 불가능하다"

=> 전 그냥 전역등록과는 다르게 하나하나 선언해서 사용해야 한다라고 이해하고 있습니다.


위 동작이 안되는 것은 런타임 컴파일러 옵션이 안켜져인 것 같고요.

https://kr.vuejs.org/v2/guide/installation.html#%EB%9F%B0%ED%83%80%EC%9E%84-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC%EC%99%80-%EB%9F%B0%ED%83%80%EC%9E%84%EC%9D%98-%EC%B0%A8%EC%9D%B4


vue-cli를 사용하신 거면 vue.config.js파일에서 runtimeCompiler 옵션을 켜시면 됩니다. (기본값 false)

https://cli.vuejs.org/config/#runtimecompiler