Javascript Vue.js:根据子组件的状态禁用父组件上的按钮

我已经阅读了有关父母与子女沟通的文档。我知道子组件通过发出事件与父组件通信，父组件将道具传递给子组件

我正在努力将这一原则应用到我的项目中：

我有一个包含多个页面的

调查

组件。我正在使用vswipe为页面（）实现一个滑块 每个

都包含一个

问题组

组件，该组件依次包含多个

问题

其中一些问题是必需的

---

如何根据当前显示的

QuestionGroup

组件中的

问题的状态禁用/启用vswipe next和previous按钮（包含在父
调查
组件中）？
这可能有点痛苦。你可以考虑使用更优雅的模式。

顺便说一下，你的问题都说了。只需使用事件在孩子和家长之间进行沟通

这里有一个方法：


Vue.component（'Question'{
模板：`
{{name}}：
`,
道具：['name']，
方法：{
toogleFilled（输入值）{
//发出组件的名称，如果输入已填充，则为true。。。
this.$emit（'filled'，this.name，！！inputValue.length）；
}
}
});
Vue.component（'QuestionGroup'{
模板：`
`,
数据（）{
返回{
//每个键都是问题的名称
//如果每个值已填充或未填充，则每个值都将为空
问题:{
“问题1”：错，
“问题2”：错误
}
};
},
方法：{
toogleReady（名称，已填写）{
本.问题[名称]=已填写；
//检查每个问题是否已填写，如果是，则为true
if（filled&&Object.values（this.questions.every）（q=>q））{
这是。$emit（'readyToSwipe'，true）；
}否则{
这是。$emit（'readyToSwipe'，false）；
}
}
}
});
Vue.组件（“调查”{
模板：`
我什么也没做
`,
数据（）{
返回{
isDisabled:正确
};
},
方法：{
toogleDisabled（就绪）{
//如果问题组未准备就绪，请禁用该按钮
this.isDisabled=！ready；
}
}
});
新Vue({
el:“#应用程序”
});
如果子组件是不可变的（即某种类型的第三方节点\ U模块），则这将不起作用。