inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

Renderless Component - 구현 방법과 활용처

vue 2.6.0 버전 이상의 v-slot 문법

391

dodofki

작성한 질문수 2

2

안녕하세요. 질문이 있습니다!

공식문서에 2.6.0 버전 이상부터 slot 문법이 바뀌어서

v-slot 이라는 문법을 사용해서 쓰고 싶은데

[Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node.

이라는 오류가 나서 최신의 문법으로 바꾸려는데 잘 안돼서요.

코드는 아래와 같습니다! 답변 부탁드립니다

// 예제코드
<div slot-scope="{ response, loading }">
// 변경코드
<template v-slot="responseloading }">

vuejs javascript

답변 1

4

dodofki

FetchData.vue 의 render 부분을 변경해서 결과값을 정상적으로 얻었습니다.

그런데 변경한 코드는 div로 slot을 한번 더 감싸는것 같습니다.

새로운 v-slot 문법을 사용하기 위해서는 꼭 createElement를 사용해야 하는이유가 있을까요?

예제코드

<slot></slot>

변경코드

<div><slot></slot></div>

// 예제코드
  render() {
    return this.$scopedSlots.default({
      response: this.response,
      loading: this.loading,
    });
  }, 
// 변경코드
  render (createElement) {
    return createElement('div', [
      this.$scopedSlots.default({
        response: this.response,
        loading: this.loading,
      })
    ]);
 },

깃 권한 요청 드립니다

0

50

1

깃 권한 신청

0

50

1

깃 권한 요청드립니다.

0

111

1

깃허브 권한 요청 드립니다

0

144

1

깃허브 권한 요청 드립니다

0

161

1

깃허브 권한 요청 드립니다

0

167

1

깃허브 권한 요청 드립니다.

0

154

1

안녕하세요 vue 2.7로 수강하고 있는 학생입니다. 실무에서 최하위 자식의 props와 watch의 관계를 여쭈고자 합니다.

0

208

1

ide 타입추론 기능 사용할 수 없을까요??

0

207

1

컴포넌트 링크는 vue peek 익스텐션 설치가 필수인가요??

0

228

1

Vue3로 진행중입니다

1

338

1

Vue router-link 사용시 같은 url이면

1

506

1

vue3 에러 메세지...

1

670

2

id ="app" 중복

0

271

2

use undefined 에러가 나옵니다.

1

318

2

깃허브 권한 요청드립니다.

1

358

2

권한요청드립니다.

1

299

2

Vue3에서 구글 애드센스 탑재하기

1

437

2

코드가 정상 작동 되는건지 ...

1

303

1

강의에서 api를 따로 빼셨는데 얻는 이점이 뭐죠?

1

243

1

vuex 적용시 질문

1

288

2

라우터 버전이 안맞는데 어떤걸 써야하나요

1

385

2

UserView에 id 속성만 undefined로 넘어오는데 이유를 모르겠습니다..

1

455

2

권한요청 드립니다!

1

275

2