Vue v-model 更改父数据但不更改自定义组件中的 value 属性答案

【问题标题】：Vue v-model changes parent data but doesn't change value prop in custom componentVue v-model 更改父数据但不更改自定义组件中的 value 属性
【发布时间】：2017-09-30 05:32:52
【问题描述】：

有人帮我解决这个奇怪的问题吗？

我有以下 vue 组件：

<template lang="pug">
div
  p.alert.alert-info {{value}}
  button(@click="onChange") Change
</template>

<script>
  import Vue from 'vue';
  export default {
    name: 'z-temp',
    props: {
      value: {
        required: true
      }
    },
    watch: {
      value(val) {
        console.log(val);
      }
    },
    methods: {
      onChange() {
        this.$emit('input', Random.id());
      }
    }
  };
</script>

我想使用v-model，但是当我使用<z-temp v-model="myDataField"> 时，当我单击Change 按钮时，myDataField 会成功更改，但是当我进行逆操作并在myDataField 中添加一些值时，如myDataField: "foo"，自定义组件将this.value 变为undefined，而不是foo。

谁能帮帮我？

【问题讨论】：

如果您在使用 z-temp 组件的地方也分享了代码，会更容易指导您。请将损坏的版本添加到您的问题中！

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

我猜 myDataField 不是响应式的，所以问题出在父级上。

【讨论】：

【解决方案2】：

你能澄清一下这个问题吗，它似乎正在正常工作，即。组件似乎不是问题。

zTemp = Vue.component('ztemp', {
	template: '#ztemp',
  props: {
    value: {
      required: true
    }
  },
  watch: {
    value(val) {
      console.log(val);
    }
  },
  methods: {
    onChange() {
      this.$emit('input', Math.random());
    }
  }
});

new Vue({
  el: '#app',
  components: {
  	zTemp
  },
  data: {
  	myinput: '0.2'
  }
});

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

<div id="app">
  {{myinput}}<br/>
  <input v-model="myinput"/><br/>
  <ztemp v-model="myinput"/><br/>
</div>

<script type="text/x-template" id="ztemp">
  <div>
    <p>{{value}}</p>
    <button @click="onChange">Change</button>
  </div>
</script>

【讨论】：

【解决方案3】：

感谢您的帮助，但我将meteor 与vue-meteor 一起使用，问题与vue-meteor 有关。

我将项目结构更改为在 .client 文件夹中使用单独的 Vue 项目，问题就消失了。这不是组件的问题，而是 vue-meteor 包的问题。无论如何，谢谢你们。

【讨论】：