[英]Emit value from child to parent component
在我的 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 上。
这一行是错误的:
v-on:input="$emit('input', value)"
这是发出旧值。
它应该是:
v-on:input="$emit('input', $event)"
这将发出新值。
或者,您可以使用:
v-on:input="value => $emit('input', value)"
或者将它移到方法中的methods
中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.