• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

20.04.20 22:18 작성 조회수 240

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 }">

답변 1

답변을 작성해보세요.

4

dodofki님의 프로필

dodofki

질문자

2020.04.20

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,
      })
    ]);
 },