v模型和子组件？

Question

我有一个表单并使用v-model绑定输入:

<input type="text" name="name" v-model="form.name">

现在我想提取输入并使其成为自己的组件,然后如何将子组件的值绑定到parent对象form.name？

Answer 1

如文档中所述,

v-model 只是语法糖:

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

要实现v-model自定义组件的指令:

• value为组件指定prop
• 将data属性设置为方法中valueprop 的值data(因为您不应该从组件中修改prop的值).
• input每当它发生更改时,都会使用data属性的值发出一个事件

这是一个简单的例子:

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

new Vue({
  el: '#app',
  data() {
    return { foo: 'a', bar: 'b' }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <!-- using v-model... -->
  <my-input v-model="foo"></my-input>
  
  <!-- is the same as this... -->  
  <my-input :value="bar" @input="bar = $event"></my-input>

  {{ foo }}<br>
  {{ bar }}
</div>

Answer 2

用 sync在主实例,如果你使用VUE> 2.2您需要使用emit到的组件.

查看此文档: - https://alligator.io/vuejs/upgrading-vue-2.3/#propsync

一个简单的例子(使用vue 2.5):

Vue.component('my-input', {
	template: '<input v-on:keyup="onChange($event)" :value="field"></div>',
	props: ["field"],
	methods: {
		onChange: function (event) {
			this.$emit('update:field', event.target.value);
		}
	}
});

var vm = new Vue({
	el: '#app',
	data:{val: ''},
});

h1 span { color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id='app'>
 <h1>
   value
   <span>{{ val }}</span>
 </h1>
	<my-input :field.sync="val">
   </my-input>
 </div>

Answer 3

Vue 2 的解决方案

您可以将所有属性和侦听器（包括v-model）从父级转发到子级，如下所示：

<input v-bind="$attrs" v-on="$listeners" />

这是$attrs的文档：

包含未被识别（和提取）为 props 的父范围属性绑定（除了class和style）。当一个组件没有任何声明的 props 时，这基本上包含所有父范围的绑定（除了class和style），并且可以通过v-bind=" $attrs"-在创建高阶组件时传递给内部组件。

确保设置inheritAttrs为false避免将属性应用于根元素（默认情况下，所有属性都应用于根元素）。

这是$listeners的文档：

包含父范围的 v-on 事件侦听器（无.native修饰符）。这可以传递给内部组件 via v-on="$listeners"-在创建透明包装组件时很有用。

因为v-model只是v-bind+的简写v-on，它也被转发。

请注意，此技术自Vue 2.4.0（2017 年 7 月）起可用，其中此功能被描述为“更轻松地创建包装器组件”。

Vue 3 的解决方案

Vue 3删除了该$listeners对象，因为侦听器现在也在该$attrs对象中。所以你只需要这样做：

<input v-bind="$attrs" />

这是文档$attrs：

包含未识别（和提取）为组件道具或自定义事件的父级范围属性绑定和事件。当一个组件没有任何声明的 props 或自定义事件时，这基本上包含所有父级范围的绑定，并且可以通过v-bind="$attrs"- 在创建高阶组件时被传递到内部组件。

如果您的组件只有一个根元素（Vue 3 允许多个根元素），那么仍然需要设置inheritAttrs为false以避免将属性应用于根元素。

这是文档inheritAttrs

默认情况下，未被识别为 props 的父范围属性绑定将“失败”。这意味着当我们有一个单根组件时，这些绑定将作为普通的 HTML 属性应用于子组件的根元素。在创作包装目标元素或其他组件的组件时，这可能并不总是所需的行为。通过设置 inheritAttrs为false，可以禁用此默认行为。这些属性可通过$attrs实例属性获得，并且可以使用 显式绑定到非根元素v-bind。

与 Vue 2 的另一个区别是$attrs对象现在包含class和style。

这是“禁用属性继承”的片段：

通过将inheritAttrs选项设置为false，您可以控制应用到其他元素的属性以使用组件的$attrs属性，其中包括未包含在组件props和emits属性中的所有属性（例如，class、style、v-on侦听器等）。

Answer 4

您还可以在子组件上指定:value和@input事件，并利用事件而不是创建监视。

MyInput.vue

<template>
  <input 
    :value="value" 
    @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  props: ['value']
};
</script>

屏幕画面

<template>
  <my-input v-model="name" />
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  components: { MyInput },
  data() {
    return {
      name: ''
    }
  }
};
</script>