Vue: [2.0] 功能组件模板

创建于 2016-10-18 · 34评论 · 资料来源: vuejs/vue

我希望能够以与标准组件相同的方式为功能组件编写模板和.vue文件。

我在这个 fiddle 中做了一个概念验证，但它很hacky。也许模板编译器可以有一个functional选项，使生成的函数更适合context对象而不是this 。

它看起来像这样：

Vue.component('test', {
  functional: true',
  props: ['msg'],
  template: `<div>
    <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>
  <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 {
  functional: true,
  props: ['msg'],
}
</script>

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

feature request

资料来源

Akryum

👍44 ❤6 🎉4

最有用的评论

它即将到来。

Akryum 于 2017-02-05

👍13 🎉9 ❤6 😄3

所有34条评论

我们已经将其作为路线图的一个选项。但是，我们将推迟到 2.0 退出当前的发布后阶段，并且我们在生态系统中为 2.0 留下的所有工作都完成了，因为这将涉及大量的工作来使正确、测试等（也, 使 vue-loader/vueify 与它一起工作等等。pp.)

感谢您的 PoC，似乎很有帮助！

LinusBorg 于 2016-10-18

是的，请。
我正在看那个。对我来说，渲染功能太多了，“感觉”与单个文件组件的整体感觉脱节。

s130059660 于 2016-11-20

对我来说最有用的是将 css 范围限定在功能组件上。

blocka 于 2016-11-28

我们能否获得有关此功能性单文件组件的状态更新？我来自 React 并且很想念这个。

trevthewebdev 于 2017-02-05

它即将到来。

Akryum 于 2017-02-05

👍13 🎉9 ❤6 😄3

任何人都可以为 n00b 解释一下它与我们现在拥有的相比有什么新的吗？

rnenjoy 于 2017-02-07

您将能够使用.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>

Akryum 于 2017-02-07

👍1

啊好的谢谢！！

rnenjoy 于 2017-02-07

那看起来很棒。知道此功能何时发布的时间表吗？

haizop 于 2017-03-15

👍10

这将使功能组件更易于使用！

scottbedard 于 2017-03-22

👍3

关于这个话题的任何更新？它会成为 2.3 版本的一部分吗？

carrotscarrots 于 2017-04-26

👍7

@Akryum你知道这个问题的状态吗？似乎几个月来一直处于困境。我们可以做些什么来帮助推动这一进程？

scottbedard 于 2017-06-07

👍6

/ping @布莱克-纽曼

Akryum 于 2017-06-07

有关于此功能的消息吗？

c01nd01r 于 2017-07-13

似乎在 2 月份开始了这方面的工作： https :

blocka 于 2017-07-17

有任何更新吗？它已经开放了一段时间 - 有什么可以帮助解决这个问题的吗？

GoodeUser 于 2017-08-01

👍3

@Akryum自从你二月份的预告片以来，这似乎已经死了。 @blake-newman 我看到你在几个月前被 ping 过，你有关于这个问题的任何信息吗？

如果这令人讨厌，我很抱歉，我真的很想知道我们如何才能做到这一点:)

scottbedard 于 2017-08-04

👍2

@scottbedard我正在研究它，有一些隐藏的问题。但是，这些可能只是记录为无法使用的功能。这项工作是很久以前完成的，不幸的是没有映射到渲染系统的当前状态，因此需要完成工作。

@vuejs/collaborators 你对这个功能的总体看法是什么，核心的开发工作和额外成本是否值得这个功能？

blake-newman 于 2017-08-15

👍1

我认为如果拥有功能是一件好事，因为编写组件的默认方式是使用模板。恕我直言，将所有渲染功能与组件（在模板编译器中使用）解耦会很棒。

Akryum 于 2017-08-15

问题是在功能上使用模板的范围是有限的，远远超过使用 JSX/Render 函数。一种

我认为在构建功能组件时，约束和设计模式不适合模板模型。这个特性需要少量的额外运行时间（https://github.com/vuejs/vue/commit/f63203310f01e9f0813e0316c308f9f21d0ee717#diff-4d479bb000ed54582de8e4cd8318ef64R1）和render函数永远不会有pure55一样的性能

启用此功能将承担更好的性能，与纯渲染功能相比，这是不正确的。我目前对该功能的立场是，它只会赋予模板使用功能，但不会提供真正的奖励。

blake-newman 于 2017-08-15

此外，为功能组件提供范围样式支持会很好，但它可能无关。

Akryum 于 2017-08-16

👍1

这是无关的，我相信这是有效的。我以前做过这方面的工作。除非有回归？

blake-newman 于 2017-08-16

Vue的函数式组件相对于React来说略显丑陋，template远不如jsx更加函数式，或许可以借用vue-loader来进行转化处理，希望可以像这样:

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

export default DumbCmp;
</script>

actually, some guys have done this serval months ago https://github.com/nickmessing/babel-plugin-jsx-vue-functional

Telanx 于 2017-09-01

👍1

这是我们一直在等待的吗？ https://github.com/vuejs/vue/commit/ea0d227d2ddfa5fc5e1112acf9cd485b4eae62cb

eshell 于 2017-10-11

🎉1

是的，Vue 2.5 + vue-loader 13.3 将对模板编译、作用域 CSS 和功能组件的热重载提供适当的支持:)

yyx990803 于 2017-10-11

🎉16

是否可以从功能组件中 $emit ？

robokozo 于 2018-01-03

除非我弄错了，否则简短的回答是否定的。功能组件不是实例，因此没有方法。

通过一些hackery，我相信你真的可以发出。渲染 fn 接收的上下文对象包含一个parent ，它应该始终是一个 vue 实例。您可以选择context.parent.$emit()或context.parent.$root.$emit()以采取更全球化的方法。如您所见，这不是从功能组件发出的事件，因此根据您的用例，这可能不是最佳解决方案。

alexsasharegan 于 2018-01-03

嘿，我正在研究优化我们的一些仪表板元素并使 SFC 组件功能听起来很棒，但我无法在那里拥有任何方法或计算道具，对吧？
如果我使用渲染函数或 JSX，我至少可以在它自己的渲染函数中定义那些，对吗？

dobromir-hristov 于 2018-01-05

是否可以从功能组件中 $emit ？

您可以访问功能上下文中的listeners对象。例如：

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

像my-functional-component的方法一样调用侦听器：

listeners['request-something'](42)

如果我使用渲染函数或 JSX，我至少可以在它自己的渲染函数中定义那些，对吗？

是的。

Akryum 于 2018-01-05

👍1

@Akryum谢谢。更大、更多模板重的 func 组件使用 JSX 可能会更好，因为标准渲染函数会使事情变得更难阅读。关于这些的更高级的教程真的很不错:)

dobromir-hristov 于 2018-01-05

您不再需要将渲染函数与功能组件一起使用。
您可以使用模板

2018 年 1 月 5 日星期五上午 4:53，Dobromir Hristov通知@ github.com
写道：

@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 于 2018-01-05

@blocka你将如何使用函数来做某事？例如实例化图表？

dobromir-hristov 于 2018-01-05

除非您完全使用 vnodes 渲染图表，否则您需要一个
具有生命周期方法的常规组件来做到这一点

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
.

blocka 于 2018-01-05

@Akryum您的解决方案有效，但让我觉得功能性 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>

robokozo 于 2018-01-05

👍12

此页面是否有帮助？

0 / 5 - 0 等级

Vue: [2.0] 功能组件模板

最有用的评论

所有34条评论

相关问题