Question

我有以下Vue typescript组件类：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="billingArea"> 
  <p>
      <label>First Name:</label>
     <input name="billingFirstName" type="text" value="" required />
  </p>
  <p>
      <label>Last Name:</label> 
    <input name="billingLastName" type="text" value="" required />
  </p>
  <p>
      <label>Street Address:</label> 
    <input name="billingAddress1" type="text" value="" required />
  </p>
  <p>
 <label> Street Address 2: </label>
    <input name="billingAddress2" type="text" value="" />
  </p>
  <p>
    <label> City: </label>
    <input name="billingCity" type="text" value="" required />
  </p>
  <p>
    State/Province: <select name="billingState" required />
      <option value="">--</option>
      <option value="Alberta, Canada">AB</option>
      <option value="Alaska, USA">AK</option>    
    </select>
  </p>
  <p>
      <label>Postal Code:</label> <input name="billingZip" type="text" value="" required />
  </p>
</div>

我通过@Component装饰器（vue-class-component）和import { Component, Prop, Vue } from 'vue-property-decorator'; import ChildComp from './ChildComp'; console.log(Prop); @Component({ template: ` <div> <ChildComp></ChildComp> </div> `, props: { state: String, }, components: { ChildComp: ChildComp, }, }) export default class MissionComp extends Vue { @Prop() test: string; mounted() { console.log(this.state, this.test); } }通过@Prop装饰器（vue-property-decorator）声明2个道具state。只有test有效。 @Prop装饰器不会向Vue添加道具，但不会抛出任何错误。

state记录Prop函数，因此加载并找到包，但似乎永远不会执行。应用程序永远不会停在那里的断点处。

我使用Webpack和babel-loader进行转换。错误可能在构建过程中出现错误吗？

Answer 1

Babel提供了解决这个问题的方法。 Babel插件16目前正在为类和函数转换装饰器。要转换类属性装饰器，您必须使用另一个插件：@babel/plugin-proposal-decorators。

ES6属性装饰器@Prop（）装饰器无法正常工作

1 个答案: