我正在学习 VueJS2 以与 Laravel 一起使用,但最终在将数据从父级发送到子级并返回事件时遇到了一些困难。昨天我在 Google 和 Stack 上进行了几次搜索。
我试图告诉孩子用户单击了父组件提交按钮,孩子必须从输入中获取数据并将其返回给父组件以进行发送。
userForm.blade.php
// Only part of the content
<b-form method="PATCH" action="/users/store">
<b-userform to-send-data="sendCall"></b-userform>
</b-form>
表单组件.vue
// Part of <script>
data() {
return {
senCall: false
};
},
methods: {
getChildData(e) {
this.sendCall = true;
console.log("FormComponent: 1");
console.log(e);
},
sendForm(data) {
console.log("FormComponent: 2");
console.log(data);
}
}
用户表单组件.vue
// Part of <Script>
props: {
toSendData: false
},
methods: {
sendData: function() {
console.log("UserForm: 1");
}
},
watch: {
toSendData: function() {
console.log("Change? " + this.toSendData);
}
}
我尝试更改to-send-data="sendCall"
为:to-send-data="sendCall"
但收到错误:
[Vue 警告]:属性或方法“sendCall”未在实例上定义,但在渲染期间被引用。
更完整的代码: CodeSandbox
谢谢您的帮助。
编辑:
在未定义的帮助下,我在 VueJS 文档和另一个社区中阅读了有关插槽/作用域插槽的更多信息,并且在另一个社区中,用户给了我一个链接,以更好地了解父母和孩子的数据流。
为了工作的代码,我to-send-data="sendCall"
从 Blade 文件中删除并将其<slot :to-send-data="sendCall"></slot>
放在 formComponent.vue 文件中。