Vue 将输入规则的箭头函数传递给 Stancil 组件

Question

我正在尝试传递箭头函数，它将像在 Vuetify https://vuetifyjs.com/en/api/v-input/#rules 中一样用作输入规则。所以我用代码在数组中传递规则：

<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>

然后我想通过观察程序在 Stencil 组件中使用控制台日志检查它，但它 returns 未定义：

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

Answer 1

当你想传递一个可以是数组或对象的规则道具时，你需要将它作为 :rules.prop="[array]"

传递

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

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

Vue 将输入规则的箭头函数传递给 Stancil 组件

Vue pass arrow function for input rules to Stancil component

javascript

vue.js

vuejs2

stenciljs

vue-props