时间戳

首页 > 解决方案 > 从子组件向父组件发出值

javascript - 从子组件向父组件发出值

问题描述

在我的 Nuxt.js 应用程序中，我尝试从子组件向父组件发出一个值。

父组件是：pages/index.vue：

<template>
  <div>
    <custom-input v-model="value" />
    <v-btn @click="showValue">
      Ok
    </v-btn>
  </div>
</template>

<script>
import CustomInput from '@/components/CustomInput.vue'
export default {
  components: { CustomInput },
  data () {
    return {
      value: 'hello'
    }
  },
  watch: {
    value (val) {
      console.log('value' + val)
    }
  },
  methods: {
    showValue () {
      console.log('value is: ' + this.value)
    }
  }
}
</script>

孩子是：component/CustomInput.vue：

<template>
  <v-text-field
    v-bind:value="value"
    v-on:input="$emit('input', value)"
  />
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    value: {
      type: String,
      required: true
    }
  },
  watch: {
    value () {
      this.$emit('input', this.value)
    }
  }
}
</script>

当我单击按钮确定时，我没有得到更新的值。我错过了什么？

在此处输入图像描述 屏幕截图显示新值不是通过单击按钮登录控制台，而是显示旧值。

我按照官方文档here

相关的简单演示托管在 Github 上。

标签： javascriptvue.jsnuxt.js

解决方案

这一行是错误的：

v-on:input="$emit('input', value)"

这是发出旧值。

它应该是：

v-on:input="$emit('input', $event)"

这将发出新值。

或者，您可以使用：

v-on:input="value => $emit('input', value)"

或者将其移到methods.

推荐阅读