인프런 커뮤니티 질문&답변
작성한 질문수
vue 2.6.0 버전 이상의 v-slot 문법
작성
·
305
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="{ response, loading }">
답변 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,
})
]);
},