子组件的 v-model 和子组件 Vue 内的 v-model [英] v-model for child component and v-model inside child component Vue

问题描述

有没有办法简化这段代码?

按钮也应该改变孩子的localValue.

Vue.component('my-input', {模板:`
<b>我的输入:</b><br>localValue: {{ localValue }} <br><输入 v-model="localValue"></div>`,道具:['价值']，数据() {返回 { localValue: this.value }},手表: {价值 () {this.localValue = this.value},本地价值(){this.$emit('input', this.localValue)}}})新的 Vue({埃尔:'#app'，数据:()=>({parentValue: '初始值'}),方法: {改变 () {this.parentValue = '改变的值'}}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></脚本><div id="app"><my-input v-model="parentValue"></my-input><button @click="change">更改</button><br>父值:{{父值}}</div>

当我需要这样做时，我总是会遇到困难.

我将非常感谢您的帮助！

解决方案

如果你避免在自定义表单组件中使用 v-model，你真的只需要

<b>我的输入:</b><br>localValue: {{ 价值 }} <br><输入 :value="value" @input="$emit('input', $event.target.value)">

没有data，没有watch，就是这样.

参见 https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

<小时>

如果您真的想要代表组件本地值的东西，Vue 文档倾向于使用计算值而不是 watchers(参考:https://vuejs.org/v2/guide/computed.html#Watchers).

这里的想法是用 getter 创建一个计算值 和 setter 以促进简化的单向数据流.

Vue.component('my-input', {模板:`<div><b>我的输入:</b><br>localValue: {{ localValue }} <br><input v-model="localValue"></div>`,道具:['价值']，计算:{本地值:{得到 () {返回 this.value},设定值) {this.$emit('输入', 值)}}}})新的 Vue({埃尔:'#app'，数据:()=>({parentValue: '初始值'}),方法: {改变 () {this.parentValue = '改变的值'}}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></脚本><div id="app"><my-input v-model="parentValue"></my-input><button @click="change">更改</button><br>父值:{{父值}}</div>

Is there a way to simplify this code?

The button should also change the localValue of the child.

Vue.component('my-input', {
  template: `
    <div>
      <b>My Input:</b> <br>
      localValue: {{ localValue }} <br>
      <input v-model="localValue">
    </div>
  `,
  props: ['value'],
  data() {
    return { localValue: this.value }
  },
  watch: {
    value () {
      this.localValue = this.value
    },
    localValue () {
      this.$emit('input', this.localValue)
    }
  }
})

new Vue({
  el: '#app',
  data: () => ({
    parentValue: 'Inital value'
  }),
  methods: {
    change () {
      this.parentValue = 'Changed value'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <my-input v-model="parentValue"></my-input>

  <button @click="change">Change</button><br>

  parentValue: {{ parentValue }}
</div>

I have always faced difficulties when I need to do so.

I will be very grateful for the help!

解决方案

If you avoid using v-model inside your custom form component, you really only need

<b>My Input:</b> <br>
localValue: {{ value }} <br>
<input :value="value" @input="$emit('input', $event.target.value)">

No data, no watch, that's it.

See https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

---

If you really want something representing a value local to your component, the Vue docs favour using computed values over watchers (ref: https://vuejs.org/v2/guide/computed.html#Watchers).

The idea here is to create a computed value with getter and setter to facilitate a simplified one-way data flow.

Vue.component('my-input', {
  template: `<div><b>My Input:</b> <br>localValue: {{ localValue }} <br><input v-model="localValue"></div>`,
  props: ['value'],
  computed: {
    localValue: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('input', value)
      }
    }
  }
})

new Vue({
  el: '#app',
  data: () => ({
    parentValue: 'Inital value'
  }),
  methods: {
    change () {
      this.parentValue = 'Changed value'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <my-input v-model="parentValue"></my-input>

  <button @click="change">Change</button><br>

  parentValue: {{ parentValue }}
</div>

这篇关于子组件的 v-model 和子组件 Vue 内的 v-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！