Vue: [2.0] 기능 구성 요소에 대한 템플릿

우리는 이미 이것을 로드맵에 옵션으로 가지고 있습니다. 그러나 우리는 2.0이 현재 출시 후 단계를 벗어나고 2.0에 대한 생태계에 남겨진 모든 작업이 완료될 때까지 이를 연기할 것입니다. , vue-loader/vueify가 그것과 함께 작동하게 만드는 것 등 pp.)

PoC 감사합니다. 도움이 될 것 같습니다!

예, 부탁합니다.
바로 그것을 바라보고 있었습니다. 나에게 렌더 기능은 너무 압도적이며 단일 파일 구성 요소의 전반적인 느낌에서 "느껴집니다".

나에게 가장 유용한 것은 CSS의 범위를 기능적 구성 요소로 지정하는 것입니다.

이 기능적인 단일 파일 구성 요소에 대한 상태 업데이트를 받을 수 있습니까? 나는 React에서 왔으며 이것을 꽤 놓치고 있습니다.

곧 출시될 예정입니다.

n00b에 대해 우리가 지금 가지고 있는 것과 비교하여 이것의 새로운 점을 설명할 수 있습니까?

다음과 같이 .vue 파일을 사용하여 기능적 구성 요소를 생성할 수 있습니다.

<template functional>
  <div class="test">
    <h1>{{props.msg}}</h1>
    <h2>Static content</h2>
    <span v-for="n in 10">{{n}} </span>
    <button @click="console.log('click', props.msg)"><slot></slot></button>
  </div>
</template>

<script>
export default {
  props: ['msg'],
}
</script>

<style scoped>
.test {
  margin: 12;
}
</style>

아 그렇군요 감사합니다!!

정말 좋아보이네요. 이 기능이 언제 출시될지 알 수 있습니까?

이렇게 하면 기능적 구성 요소를 훨씬 더 쉽게 사용할 수 있습니다!

이 주제에 대한 업데이트가 있습니까? 2.3 릴리스의 일부가 될까요?

@Akryum 이 문제의 상황을 알고 있습니까? 몇 개월 동안 침체에 빠진 것 같습니다. 이 문제를 해결하기 위해 우리가 할 수 있는 일이 있습니까?

/ping @blake-newman

이 기능에 대한 소식이 있습니까?

2월에 이에 대한 작업이 시작된 것 같습니다: https://github.com/vuejs/vue/tree/feature/fn-templates

이에 대한 업데이트가 있습니까? 오픈한 지 얼마 되지 않았습니다. 이 문제를 해결하기 위해 할 수 있는 일이 있습니까?

@Akryum 지난 2월 티저 이후로 물에

이것이 성가신 일이라면 죄송합니다. 어떻게 하면 이런 일이 일어나게 할 수 있는지 알고 싶습니다. :)

@scottbedard 제가 작업하고 있었는데 몇 가지 숨겨진 문제가 있었습니다. 그러나 이러한 기능은 사용할 수 없는 기능으로 문서화될 수 있습니다. 작업은 꽤 오래 전에 완료되었으며 불행하게도 렌더링 시스템의 현재 상태에 매핑되지 않으므로 작업을 완료해야 합니다.

@vuejs/collaborators 이 기능에 대해 전반적으로 어떻게 생각하십니까? 개발 노력과 코어에 대한 추가 비용이 이 기능을 사용할 가치가 있습니까?

컴포넌트를 작성하는 기본 방법은 템플릿을 사용하는 것이기 때문에 기능이 있으면 좋은 것 같아요. 그리고 (템플릿 컴파일러에서 사용되는) 구성 요소에서 모든 렌더링 기능을 분리하는 IMHO는 훌륭할 것입니다.

문제는 템플릿을 기능적으로 사용하는 범위가 JSX/Render 기능을 사용하는 것보다 훨씬 더 제한적이라는 것입니다. NS

기능적 컴포넌트를 구축하는 시점에서 제약 조건과 디자인 패턴이 템플릿 모델에 맞지 않는다고 생각합니다. 이 기능은 약간의 추가 런타임이 필요합니다(https://github.com/vuejs/vue/commit/f63203310f01e9f0813e0316c308f9f21d0ee717#diff-4d479bb000ed54582de8e4cd8158ef64와 동일한 성능을 가짐).

이 기능을 활성화하면 더 나은 성능을 가정하지만 순수 렌더 기능에 비해 이는 사실이 아닙니다. 현재 이 기능에 대한 제 입장은 템플릿이 기능을 사용할 수 있도록 권한을 부여할 뿐 진정한 보상은 제공하지 않는다는 것입니다.

또한 기능적 구성 요소에 대한 범위 스타일 지원이 있으면 좋겠지만 관련이 없을 수 있습니다.

그것은 관련이 없습니다. 나는 그것이 효과가 있다고 믿습니다. 나는 전에 그것에 대해 작업했습니다. 회귀가 없다면?

Vue의 기능적 구성 요소는 React에 비해 약간 추합니다. template jsx 보다 훨씬 덜 기능적입니다. 아마도 다음과 같이 변환 처리를 위해 vue-loader 를 빌릴 수 있습니다.

<script functional>
const DumbCmp = props => (
  <Button>{props.label}</Button>
);

export default DumbCmp;
</script>

실제로, 일부 사람들은 몇 달 전에이 serval을 수행했습니다. https://github.com/nickmessing/babel-plugin-jsx-vue-functional

이것이 우리가 기다리던 것입니까? https://github.com/vuejs/vue/commit/ea0d227d2ddfa5fc5e1112acf9cd485b4eae62cb

예, Vue 2.5 + vue-loader 13.3은 템플릿 컴파일, 범위가 지정된 CSS 및 기능 구성 요소에 대한 핫 리로드를 적절하게 지원합니다. :)

기능적 구성 요소에서 $emit이 가능합니까?

내가 틀리지 않는 한, 짧은 대답은 아니오입니다. 기능 구성 요소는 인스턴스가 아니므로 메서드가 없습니다.

일부 해커를 통해 실제로 방출할 수 있다고 생각합니다. 렌더 fn이 수신하는 컨텍스트 객체에는 항상 vue 인스턴스여야 하는 parent 가 포함되어 있습니다. context.parent.$emit() 또는 context.parent.$root.$emit() 를 선택하여 보다 글로벌한 접근 방식을 취할 수 있습니다. 보시다시피 이것은 기능 구성 요소에서 발생하는 이벤트가 아니므로 사용 사례에 따라 최상의 솔루션이 아닐 수 있습니다.

안녕하세요, 저는 대시보드 요소 중 일부를 최적화하고 SFC 구성 요소가 기능적으로 멋지게 들리도록 하는 방법을 연구하고 있었지만 거기에는 메서드나 계산된 소품이 없을 것입니다. 그렇죠?
렌더 기능이나 JSX를 사용하는 경우 최소한 렌더 기능 내부에서 자체적으로 정의할 수 있습니다. 맞습니까?

기능적 구성 요소에서 $emit이 가능합니까?

기능 컨텍스트 에서 listeners 개체에 액세스할 수 있습니다. 예를 들어:

<my-functional-component @request-something="onRequestSomething" />

my-functional-component 내부의 메서드처럼 리스너를 호출합니다.

listeners['request-something'](42)

렌더 기능이나 JSX를 사용하는 경우 최소한 렌더 기능 내부에서 자체적으로 정의할 수 있습니다. 맞습니까?

예.

@Akryum 감사합니다. 표준 렌더 기능이 내용을 읽기 어렵게 만들기 때문에 더 크고 템플릿이 많은 기능 구성 요소가 JSX를 사용하는 것이 더 나을 수 있습니다. 이것에 대한 고급 튜토리얼은 정말 달콤할 것입니다. :)

더 이상 기능 구성 요소와 함께 렌더링 기능을 사용할 필요가 없습니다.
템플릿을 사용할 수 있습니다

2018년 1월 5일 금요일 오전 4시 53분, Dobromir Hristov [email protected]
썼다:

@Akryum https://github.com/akryum 감사합니다. 더 크고 더 무거운 템플릿
func 구성 요소는 표준 렌더링 때문에 JSX를 사용하는 것이 더 나을 수 있습니다.
함수를 사용하면 읽기가 조금 더 어려워집니다. 고급 튜토리얼
이것들은 정말 달콤할 것입니다 :)

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인
https://github.com/vuejs/vue/issues/3977#issuecomment-355514921 또는 음소거
스레드
https://github.com/notifications/unsubscribe-auth/AACouk0kTLUHRjQDnXj2vn2v4Rq7maXOks5tHfExgaJpZM4KaIfu
.

@blocka 함수를 사용하여 작업을 수행하는 방법은 무엇입니까? 예를 들어 차트를 인스턴스화하시겠습니까?

vnode로 차트를 완전히 렌더링하지 않는 한
이를 수행하는 수명 주기 메서드가 있는 일반 구성 요소

2018년 1월 5일 금요일 오전 5:41 Dobromir Hristov 알림 @github.com
썼다:

@blocka https://github.com/blocka 함수를 사용하여 수행하는 방법
무엇? 예를 들어 차트를 인스턴스화하시겠습니까?

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인
https://github.com/vuejs/vue/issues/3977#issuecomment-355524605 또는 음소거
스레드
https://github.com/notifications/unsubscribe-auth/AACouvWQNer0XUjuzBDHgePpZQ-D2DAWks5tHfx2gaJpZM4KaIfu
.

@Akryum 귀하의 솔루션은 효과가 있지만 기능적인 sfc 템플릿이 조금 더 많은 사랑을 사용할 수 있다는 느낌을 줍니다. 저는 처음부터 작동할 수 있었던 여러 구성 요소를 다시 작성하는 과정에 있으며 경험에 약간 실망했습니다. sfc에는 props 및 listeners 템플릿에서 액세스할 수 있는 컨텍스트가 이미 있습니다. 이러한 속성을 props의 경우 'root'에 매핑하고 리스너의 경우 '$emit'에 매핑하여 각 유형의 sfc가 동일한 API로 작동하도록 할 수 없었습니까?

<template functional>
    <div @click="listeners['request-something'](42)">
        {{props.hello}}
        {{props.world}}
    </div>
</template>

<script>
export default {
    props: ["hello", "world"]
}
</script>

될 수 있었다

<template functional>
    <div @click="$emit('request-something', 42)">
        {{hello}}
        {{world}}
    </div>
</template>

<script>
export default {
    props: ["hello", "world"]
}
</script>