时间戳

首页 > 解决方案 > 如何将输入值数据从 Vue 组件传递到根元素

javascript - 如何将输入值数据从 Vue 组件传递到根元素

问题描述

我想将 json 数据从 Vue 发布到 php，但我正在努力寻找一种将输入值数据从 Vue 组件传递到根元素的方法。当我调用方法 submitProduct 时，警报消息只会给我“未定义”。由于那个愚蠢的后余额政策，我不得不剥离我的原始代码。这里有什么问题？

  var productForm = Vue.createApp ({
            methods:{
                submitProduct: function(){
                    alert(JSON.stringify(productForm.product))
                    this.postData(productForm.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})
                        //body: 'd='+d
                    })
                }
            }
        })
        
        productForm.component('custom-form', {
            props: ["value"],
            template: `
                <label>SKU<input type="text" :value=this.product.sku></label>
                <label>Name<input type="text" :value=this.product.name></label>
                <label>Price<input type="text" :value=this.product.price></label>
            ` ,
            
            data: function() {
                return {
                    product: {
                        sku: 0,
                        name: 'asdf',
                        price: 0
                    },
                    options: ['Size', 'Weight', 'Dimensions'],
                    selected: 'Size'
                }
            }
        })
        
        productForm.component('status-bar', {
            props: ['info'],
            template: '<p>{{ selected }}</p>'
        })
        
        const vm = productForm.mount('#product_form')

标签： javascriptvue.js

解决方案

product状态属于组件，custom-form因此根应用程序无法访问该状态。

如果您尝试创建表单并从表单中获取输入，则需要执行以下操作之一：

  1. 将状态提升到根并传递custom-form并绑定一个事件以在此处收听状态更改文档。（仅当custom-form组件不在组件树的深处时才这样做）
  2. 使用像 Vuex 这样的状态管理存储在应用程序中共享状态（如果子组件在树的深处，您必须将状态向下传递这么多级别，使用存储管理可以解决这个问题）。文档在这里。如果您的应用程序非常小，请考虑提供/注入 API。
  3. 另一种选择是使用提供/注入 API（类似于 react 中的上下文提供者）。

推荐阅读