如何从Vue组件获取输入数据并传递给Vue根实例实现提交取值

核心实现逻辑 #

Vue中子组件向父组件（这里父组件就是根实例）传值遵循自定义事件派发规则：

• 子组件内部值变化时，用$emit把值派发给父组件
• 父组件用v-on（简写@）监听子组件派发的事件，把接收的值存在自己的变量中
• 提交时直接调用父组件自身存储的变量即可拿到值

原有代码的错误点 #

• 注册组件的对象写错：不是testComponent.component，应该是你创建的app实例testApp.component
• input标签同时写了v-model和:value产生冲突，v-model本身就是双向绑定语法糖，不需要额外加:value
• 根实例submitBtn方法中的submit.test是未定义的变量，没有声明过submit对象
• 子组件的输入值没有同步给根实例，根实例自然无法读取到值

修正后可运行的完整代码 #

HTML部分

<div id="form">
    <button v-on:click="submitBtn">Save</button>
    <!-- 监听子组件派发的update-input事件，把收到的值存在根实例的inputVal里 -->
    <custom-form @update-input="val => inputVal = val"></custom-form>
</div>

JS部分

<script>
var testApp = Vue.createApp ({
    // 根实例新增变量存储子组件传过来的输入值
    data() {
        return {
            inputVal: ''
        }
    },
    methods: {
        submitBtn: function(){
            // 直接读取根实例自身存储的inputVal
            alert(this.inputVal)
        }
    }
})

testApp.component('custom-form', {
    template: `
        <label>test<input type="text" v-model="test"></label>
    ` ,
    data: function() {
        return {
            test: 'msg'
        }
    },
    // 监听输入值变化，实时派发给父组件
    watch: {
        test(newVal) {
            this.$emit('update-input', newVal)
        }
    },
    // 组件初始化时把默认值传给父组件，避免第一次提交为空
    mounted() {
        this.$emit('update-input', this.test)
    }
})

const vm = testApp.mount('#form')
</script>

运行逻辑说明 #

1. 子组件custom-form的输入框绑定了内部的test变量，输入时test会自动同步更新
2. 子组件的watch监听到test变化，调用$emit触发update-input事件，把最新的test值向外传递
3. 根实例调用custom-form时用@update-input监听该事件，收到值后存入自身的inputVal变量
4. 点击提交按钮时，根实例直接读取自身的inputVal就能拿到输入框的最新值，不会出现undefined

内容的提问来源于stack exchange，提问作者v01d