javascript - VueJS 传递默认属性而不引用子组件

Question

我偶然发现了这种情况，我想将一个 prop 传递给子组件，该组件将成为组件的 default 值，但只有在初始值为空时才会显示.

父组件:

<multi-line-input v-model="data.something" placeholder="Enter Something" :default="data.something"/>

子组件

props: {
  value: {
    type: String,
    default: ''
  },
  default: {
    type: String,
    default: ''
  },
},
methods: {
  emitBlur (e) {
    if (!this.value && this.default) {
      this.value = this.default
    }
    this.$emit('blur')
  },
  emitInput () {
    this.$emit('input', this.$el.value)
  }
}

所以我基本上想要实现的是，当组件加载将从 v-model 获取值时，它还会收到一个 default 值，而该值不应该更改，并且仅在 blur

上的实际值为空时用作值

default 将具有 data.something 的初始值并且不应更改!

我尝试使用 JSON.parse(JSON.stringify(this.value)) 摆脱引用，但它似乎也不起作用!

Answer 1

因此，如果我正确理解您的问题，您需要这种行为:在 blur 上您的 <multi-line-input> 上的事件组件，如果输入的值为空，则将该值设置为由父级(通过 prop)指定的默认值。

首先，做this.value = ...是错误的在你的组件中。您不得修改 props，props 仅将数据从父级传递给子级，通过 props 传递的数据不是您可以直接从组件内部修改的。

尝试这样的事情:

Vue.component('multi-line-input', {
  template: '<input @blur="onBlur" @input="onInput" :value="value">',
  props: {
    value: {
      type: String,
      default: '',
    },
    default: {
      type: String,
      default: '',
    },
  },
  methods: {
    onBlur() {
      if (!this.value && this.default) {
        this.$emit('input', this.default);
      }
    },
    onInput(e) {
      this.$emit('input', e.target.value);
    },
  },
});

new Vue({
  el: '#app',
  data: {
    user: null,
    initialUser: null,
  },
  created() {
    // Pretend that I'm pulling this data from some API
    this.user = {
      name: 'Fred',
      email: 'fred@email.com',
      address: '123 Fake St',
    };
    
    // Make a copy of the data for the purpose of assigning the
    // default prop of each input
    this.initialUser = _.cloneDeep(this.user);
  },
});

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

<div id="app">
  <template v-if="user">
    <multi-line-input v-model="user.name" :default="initialUser.name"></multi-line-input>
    <multi-line-input v-model="user.email" :default="initialUser.email"></multi-line-input>
    <multi-line-input v-model="user.address" :default="initialUser.address"></multi-line-input>
  </template>
</div>

或者，如果您希望默认值由组件而不是父组件(通过 prop)确定，您可以改为执行以下操作:

Vue.component('multi-line-input', {
  template: '<input @blur="onBlur" @input="onInput" :value="value">',
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  created() {
    this.def = this.value;
  },
  methods: {
    onBlur() {
      if (!this.value && this.def) {
        this.$emit('input', this.def);
      }
    },
    onInput(e) {
      this.$emit('input', e.target.value);
    },
  },
});

new Vue({
  el: '#app',
  data: {
    user: null,
  },
  created() {
    // Pretend that I'm pulling this data from some API
    this.user = {
      name: 'Fred',
      email: 'fred@email.com',
      address: '123 Fake St',
    };
  },
});

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

<div id="app">
  <template v-if="user">
    <multi-line-input v-model="user.name"></multi-line-input>
    <multi-line-input v-model="user.email"></multi-line-input>
    <multi-line-input v-model="user.address"></multi-line-input>
  </template>
</div>

但是我不推荐第二种方法，因为子组件实例在其整个生命周期内只有一个默认值。 Vue 会尽可能重用组件实例，因此如果 Vue 将其绑定(bind)到不同的父组件，它就不会工作(它如何/何时更新自己的 default 状态？)。