Javascript 用于将规则输入到Stancil组件的Vue传递箭头函数_Javascript_Vue.js_Vuejs2_Stenciljs_Vue Props

Javascript 用于将规则输入到Stancil组件的Vue传递箭头函数

javascript vue.js vuejs2

Javascript 用于将规则输入到Stancil组件的Vue传递箭头函数,javascript,vue.js,vuejs2,stenciljs,vue-props,Javascript,Vue.js,Vuejs2,Stenciljs,Vue Props,我正在尝试传递arrow函数，它将像Vuetify一样作为输入规则工作。所以我用代码在数组中传递规则： <body> <div id="app"> <test-component :rules="[required, passwordRule]" :placeholder="placeholder" :label="label" :value="value&

我正在尝试传递arrow函数，它将像Vuetify一样作为输入规则工作。所以我用代码在数组中传递规则：

<body>
    <div id="app">
      <test-component :rules="[required, passwordRule]" :placeholder="placeholder" :label="label" :value="value" @valueChange="e => onValueChange"></test-component>
      {{value}}
      <button @click="value = 'test'">Test</button>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          label: 'Username',
          value: '',
          placeholder: 'Write username',
          required: v => !!v || 'This field is required',
          passwordRule: v => v.length >= 8 || 'Your password is too short',
        };
      },
      methods: {
        onValueChange(e) {
          console.log(e);
        },
      },
    });
  </script>


{{value}}
试验
var app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
标签：“用户名”，
值：“”，
占位符：“写入用户名”，
必填项：v=>！！v | |“此字段为必填项”，
密码规则：v=>v.length>=8 | |“您的密码太短”，
};
},
方法：{
onValueChange（e）{
控制台日志（e）；
},
},
});

然后我想通过watcher在带有控制台日志的模具组件中检查它，但它返回未定义的：

  @Prop() rules: Array<Function>;
  @Watch('value')
  watchHandler(newValue: string, oldValue: string) {
    console.log(this.rules);
    /* ... */
  }

@Prop（）规则：数组；
@监视（‘值’）
watchHandler（newValue:string，oldValue:string）{
console.log（this.rules）；
/* ... */
}

当您想要传递一个可以是数组或对象的规则道具时，您需要将其作为

：rules.prop=“[array]”传递。

在你的情况下，应该是这样的

<test-component :rules.prop="[required, passwordRule]" :placeholder="placeholder" :label="label" :value="value" @valueChange="e => onValueChange"></test-component>