매운만두맥주
1k
2021-06-12 21:00:05
1
154

vue.js 지역컴포넌트 좀 질문드리겠습니다.


https://kr.vuejs.org/v2/guide/components-registration.html


뷰 공식문서의 지역컴포넌트 부분에 나오는 설명이 잘 이해가 안 돼서 질문드립니다.


"지역 등록된 컴포넌트는 하위컴포넌트에서는 사용이 불가능하다는 점을 유의해야 합니다. 예를 들어 ComponentA를 ComponentB에서 쓰고 싶다면 아래와 같이 해야 합니다."


var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}


위의 문장이 뷰 공식문서에 나와 있는 지역 컴포넌트에 관한 설명인데요,


저는 이걸 지역컴포넌트로 등록한 컴포넌트(ComponentB) 내부에 

해당 컴포넌트(ComponentA)를 등록해 사용할 수 있다는 것으로 받아들였습니다.


하지만, 공식문서에는 위 내용에 대한 완전한 코드가 나와 있지 않아서

제가 만들어봤는데 작동이 안 되네요


  <div id="test">
    <local1>
       <!-- <local2></local2> -->
    </local1>
  </div>

<script>
     var localComp1 = {
         template: '<div>지역컴포넌트 1<local2></local2></div>',
         components: {
             'local2': localComp2
         }
     }
     var localComp2 = {
         template: '<div>지역컴포넌트 2</div>'
     }

     new Vue({
         el: '#test',
         components: {
             'local1': localComp1,
             'local2': localComp2
         }
     })
</script>


참고로 위 코드에서 new Vue에 등록된 localComp2를 빼보기도하고, 

<local2>태그를 빼고, localComp1 내부에만 정의해보기도 하고

여러 가지 형태로 시도해봤는데 안 되네요.


제가 공식문서에 나온 설명을 오해한 것일까요?



0
  • 답변 1

  • scissors hand
    185
    2021-06-14 10:21:20 작성 2021-06-14 10:56:55 수정됨

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

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

    우선  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>
  • 로그인을 하시면 답변을 등록할 수 있습니다.