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 ：

これに関する更新はありますか？ しばらく開いていますが、この問題を解決するためにできることはありますか？

@Akryumは、2月のティーザー以来、水中で死んでいるように見えました。 @ blake-newman数か月前にpingが送信されたようですが、この問題に関する情報はありますか？

これが煩わしくなってしまったらごめんなさい、どうすればこれを実現できるのか本当に知りたいです:)

@scottbedard私はそれに取り組んでいました、いくつかの隠された落とし穴がありました。 ただし、これらは使用できない機能として文書化される可能性があります。 作業はかなり前に行われ、残念ながらレンダリングシステムの現在の状態にマッピングされないため、作業を行う必要があります。

@ vuejs / collaboratorsこの機能全体についてどう思いますか？開発努力とコアへの追加コストはこの機能の価値がありますか？

コンポーネントを作成するデフォルトの方法はテンプレートを使用することなので、機能があると便利だと思います。 そして、IMHOがすべてのレンダリング関数をコンポーネント（テンプレートコンパイラで使用）から切り離すのは素晴らしいことです。

問題は、JSX / Render関数を使用するよりも、テンプレートを機能的に使用する範囲が制限されていることです。 NS

機能コンポーネントを構築する時点では、制約とデザインパターンはテンプレートモデルに適合していないと思います。 この機能には少量の追加ランタイムが必要であり（https://github.com/vuejs/vue/commit/f63203310f01e9f0813e0316c308f9f21d0ee717#diff-4d479bb000ed54582de8e4cd8318ef64R157）、純粋なレンダリング関数と同じパフォーマンスになることはありません。

この機能を有効にすると、純粋なレンダリング機能と比較して、パフォーマンスが向上することが想定されますが、これは当てはまりません。 現時点でのこの機能に対する私のスタンスは、テンプレートが機能を使用できるようにするだけで、真の報酬は得られないというものです。

また、機能コンポーネントのスコープスタイルのサポートがあると便利ですが、関係がない場合があります。

それは無関係です、私はそれが働いていると信じています。 私は以前にそれに取り組んだことがあります。 回帰がない限り？

Vueの機能コンポーネントはReactに比べて少し醜いです。 template jsxよりもはるかに機能が劣ります。おそらく、変換処理のためにvue-loaderを借りることができます。

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

export default DumbCmp;
</script>

実際、何人かの人は数ヶ月前にこのサーバルを実行しました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が受け取るコンテキストオブジェクトにはparentが含まれており、これは常にvueインスタンスである必要があります。 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フリストフ[email protected]
書きました：

@Akryumhttps ：//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フリストフ[email protected]
書きました：

@blockahttps ：//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のテンプレートからアクセスできるコンテキストがすでにあります。 これらのプロパティを小道具の「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>