Vue 기초3

slot

 

자식 컴포넌트에 값이아닌 템플릿을 보낼 수 있는 기능이다.

전에는 단지 <component/> 이런식으로 안에 props라던지 이런 걸 넘겨주었지만

<component> </component> 이 컴포넌트 사이에 html태그를 넣어 컴포넌트에 전달하는 것이다.

 

먼저 GoGo라는 component가 있다. 이 안에 <template></template>를 두개 만들고

각각에 #headerrr , #default를 넣었다. 내용은 각각다르다.

GoGo.vue

위 이미지는 GoGo 컴포넌트이다. 위에서 적은 값을 받아오기 위해서 <slot></slot>을 열어주어야한다.

name에 #headerrr을 적어주면 #headerrr에 적힌 태그들만 읽어온다. 반대로 #default를 적은 내용은 별도로 name을 적지 않은 slot에 들어간다.

 

이 때 컴포넌트에서 데이터를 보내줄 수도 있다. myname을 data라는 이름으로 보낸다. 다시 상위 컴포넌트로 올라가보자

#headerrr='{ data }'를 적어주면 우리가 하위 컴포넌트 슬롯에서 넘겨준 data값이 잘 들어있고 이를 사용할 수 있다.

 router 🛵

 

vue의 router에 대해서 알아보자!!!

router에는 정말 다양한 기능이 있지만, 하나하나 모르는 것 부터 정리해 나가려고 한다.

 const routes = [
        {
          path: "/user",
          component: User,

          children: [
            {
              path: "profile",
              name: "Profile",
              component: UserProfile,
            },
            {
              path: "post/:id",
              name: "Post",
              component: UserPost,
            },
          ],
        },
      ];

routes를 보면 상위 라우터 하위(children)라우터가 존재한다. 즉 하위 라우터는 /user/profile, /user/post처럼 user 뒤에 존재해야 한다. 그리고 path에 post/:id 처럼 param을 정해줄 수 있다. 이렇게 정해준 경우에는 post로만 접근하면 접근이 안된다. param까지 같이 적어주어야 된다.

 

이 prams에는 template에서 {{ $route.params.id }} 이렇게 접근할 수 있다. this.$route.params.id 이렇게 쓰면 method 등에서 사용할 수 있다.

 

그리고 user/post/1 , user/post/2와 같이 하위 라우터가 바뀌면  post component 등 상위 컴포넌트의 라이프사이클 훅이 제대로 동작하지 않는다 예를들어 created(){ }를 사용한다면 바뀔 때마다 created실행 안됨..

 

watch를 통해서 router의 변경을 감지할 수 있다. 이런식으로 해두고 

        // 상위 컴포넌트에 설정한 경우 하위 컴포넌트들의 변경이 감지되지만, 
        // 하위 컴포넌트에 설정한 경우에는 상위 컴포넌트의 변경 감지 x
        watch: {
          $route(to, from) {
            console.log("from", from);
            console.log("to", to);
          },
        },

/user/post/1 /user/post2 이렇게 이동을 한다면 from에는 /user/post/1의 정보가, to에는 /user/post2의 정보가 들어있게된다. 

물론 /user/post에서  /user/profile로 변경하게 된다면 마찬가지로 from에는 /user/post의 정보가, to에는 /user/profile의 정보가 들어가게된다.