如何将Vue组件的输入值数据传递给根元素

Question

我想从Vue发布json数据到php，但我正在努力寻找一种方法来传递从Vue组件到根元素的输入值数据。当我调用方法submitProduct时，警告消息简单地给我"undefined"。由于愚蠢的post balance政策，我不得不删除我的原始代码。这是怎么了?

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')

Answer 1

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

如果您尝试创建一个表单并从表单中获取输入，您需要执行以下操作中的1:

1. 将状态提升到根并向下传递custom-form并绑定一个事件以侦听这里的状态更改文档。(只有当custom-form组件不在组件树的深处时才这样做)
2. 使用像Vuex这样的状态管理存储来在应用程序中共享状态(如果子组件在树的深处，你必须将状态传递到很多层次，使用存储管理将解决这个问题)。文档。如果你的应用真的很小，可以考虑使用提供/注入API。另一个选择是使用提供/注入API(类似于react中的上下文提供程序)。

Answer 2

首先，经过3.5天的努力去理解Vue，我得到了测试成功的结果。我要感谢你和其他任何帮助我理解Vue基本原理的人!：(请看下面的链接…

https://jsfiddle.net/e2mnh4xa/

注:是的!你是正确的重新安排"自定义形式"标签。:)

html代码:

<div id="product_form" v-cloak>
<custom-form>

</custom-form>
</div>

js代码:

var productForm = Vue.createApp ({})

productForm.component('custom-form', {
props: {
modelValue: {
type: String,
default: ''
},
},   
components: ['status-bar'],
template: `
<button v-on:click="submitProduct">Save</button>
<label>SKU<input type="text" v-model="this.product.sku"></label>
<label>Name<input type="text" v-model="this.product.name"></label>
<label>Price<input type="text" v-model="this.product.price"></label>
` ,
data: function() {
return {
product: {
sku: 0,
name: 'asdf',
price: 0,
},
options: ['Size', 'Weight', 'Dimensions'],
selected: 'Size',
outputData: ''
}
},
computed:{
model:{
get(){ return this.modelValue },
set(v){ this.$emit('update:modelValue',v)}
}
},
methods:{
submitProduct: function(){
alert (this.showData());
return this.postData(this.product)
},
showData: function(){
console.log(this.product.sku)
return JSON.stringify(this.product)
}
}
})
const vm = productForm.mount('#product_form')