开发小问题集锦~

持续更新

1. 在利用van-field进行数据校验的时候，若想添加的rule起作用，需要在van-field外面嵌套van-form标签。

            name="账号"
            v-model="data.userName"
            @input="onDataChange"
            @clear="onDataChange"
            clearable
            label="账号"
            maxlength="50"
            autocomplete="off"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请输入账号' }]"

2. vue的 .sync修饰符和v-model双向数据绑定

• .sync修饰符的作用是父子组件通过props传递数据之后，使子组件能直接改变父组件的数据

<Father :userName.sync="userName" :password.sync="password"></Father>

在子组件内部(代码如下)，数据绑定的是value值，注意不是v-model

  <van-field
        name="用户名"
        :value="userName"
        @input="
          value => {
            $emit('update:userName', value);
          }
        "
        label="用户名"
        maxlength="50"
        :rules="userNameRules"
        clearable
        autocomplete="off"
        @click.once="focus"
        :placeholder="userNamePlaceholder"
      />

• v-model绑定数据，v-model语法糖和.sync的修饰符语法糖也有相似的功能 父组件代码：

<Father  v-model="userName" :password.sync="password"></Father>

子组件代码（如下），其中子组件数据改变的时候需要通过事件触发来更新父组件传过来的数据

  <van-field
        name="用户名"
       v-model="userName"
        @input="onInfoChanged"
        label="用户名"
        maxlength="50"
        :rules="userNameRules"
        clearable
        autocomplete="off"
        @click.once="focus"
        :placeholder="userNamePlaceholder"
      />
  model: {
    prop: 'userName',
    event: 'on-info-change',
  },
  props: {
    userName: {
      type: String,
      default: '',
    },
  }, 
   onInfoChanged() {
      this.$emit('on-info-change', this.userName);
    },