如何在 Vue 上的 html 标签上声明组件 props <template> .js

Question

我正在使用Vue。与其在我的 javascript 上声明我的模板，我更喜欢在 sublime 上做 html 的方式来提高可读性和代码检测，所以我使用这个：

<template id="test-component">
<h1>Testing</h1>
</template>
Vue.component('test', {
template: '#test-component'
});
<test></test>

效果很好..但我想将一些数据传递给模板，如下所示：

<template id="test-component">
<h1>{{text}}</h1>
</template>
Vue.component('test', {
template: '#test-component',
props: ['text']
});
<test text="asd"></test>

也很好用，但是..我想在模板标签上声明 props，以便在我的项目上更容易阅读，而不是在 javascript 组件函数上，有什么办法可以做到这一点吗？像这样的东西(不起作用(：

<template id="test-component" props="['text]">
<h1>{{text}}</h1>
</template>

Answer 1

你不能像你建议的那样在模板标签上声明 props，唯一的方法是按照文档在 JavaScript 中声明它们。

我真的不确定你为什么要这样做，或者它会如何提高可读性。道具是组件定义本身的一部分，而不是模板的一部分。并非所有道具都可以在模板中渲染。您是否认为也应该在模板标记上指定计算属性？