vue.js - Vue 2 将值从子元素传递到父元素（自定义样式输入）

Question

假设我有自定义输入

<template>
  <input v-model="value"/>
</template>

<script>
export default {
  name: "my-input",
  props: {
    value: String
  }
}
</script>

我如何将它的值传递给父元素

<template>
  <my-input v-model="test"/>
  <button @click="check">see value</button>
</template>

<script>
export default {
  methods: {
    check() {
      console.log(this.test);
    }
  }
}
</script>

当我按下它显示的按钮时undefined。我希望它返回我的输入值。

我怎么能从中传递价值？我尝试了 v-model 和 :value，两者都显示undefined。

标签： vue.jsvuejs2

Answer 1

将输入值绑定到 prop ，value然后添加@input将输入值发送到父组件的事件：

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

<script>
export default {
  name: "my-input",
  props: {
    value: String
  }
}
</script>