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。我期望它返回我的-input值。

我如何传递它的值呢？我尝试了v-model和:value，它们都显示了undefined。

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>