如何将Vue组件内的input输入值传递到根实例，解决提交PHP时undefined问题

• 根应用实例未定义product响应式数据：调用submitProduct时访问的productForm.product不存在，productForm是Vue应用实例而非根组件实例，即便用挂载后的vm实例访问，根组件也没有在data中声明product变量，自然返回undefined。
• 父子组件数据隔离：custom-form子组件内部的product是子组件私有的响应式数据，父组件默认无法直接访问，必须通过自定义事件或者v-model协议将子组件数据同步到父组件。
• 输入框未实现双向绑定：仅给input绑定了:value单向属性，没有监听输入事件更新绑定值，用户输入的内容不会同步到子组件的product对象中。
• 模板语法不规范：Vue模板中访问响应式变量不需要加this前缀，部分场景下会引发逻辑异常。

第一步：修改根实例配置，新增响应式数据声明 #

var productForm = Vue.createApp ({
    // 新增根组件的响应式数据定义
    data() {
        return {
            product: {
                sku: 0,
                name: 'asdf',
                price: 0
            }
        }
    },
    methods:{
        submitProduct: function(){
            // 用this访问当前根组件实例的product
            alert(JSON.stringify(this.product))
            this.postData(this.product)
        },
        postData: function(p){
            fetch('mysql_postdata.php', {
                method: 'POST', 
                mode: "same-origin",
                credentials: "same-origin",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({p:p})
            })
        }
    }
})

第二步：修改自定义组件，适配v-model实现父子数据同步 #

productForm.component('custom-form', {
    props: ["modelValue"], // Vue3 v-model默认接收的prop名
    emits: ['update:modelValue'], // 声明要触发的同步事件
    template: `
        <label>SKU<input type="text" v-model="localProduct.sku"></label>
        <label>Name<input type="text" v-model="localProduct.name"></label>
        <label>Price<input type="text" v-model="localProduct.price"></label>
    ` ,
    computed: {
        // 用计算属性做中转，避免直接修改prop报错
        localProduct: {
            get() {
                return this.modelValue
            },
            set(val) {
                this.$emit('update:modelValue', val)
            }
        }
    },
    data: function() {
        return {
            options: ['Size', 'Weight', 'Dimensions'],
            selected: 'Size'
        }
    }
})

第三步：修改页面HTML模板，给自定义组件绑定v-model #

<div id="product_form">
    <!-- 绑定v-model关联根组件product和子组件数据 -->
    <custom-form v-model="product"></custom-form>
    <button @click="submitProduct">提交数据</button>
</div>

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