Javascript Vue组件，切换数据

我想我要崩溃了，这是一些非常基本的东西，但它似乎不起作用

基本上，点击链接应该在true和false之间切换

display

，但事实并非如此

Vue.component（'dropdown'{
道具：[“扩展”]，
数据：函数（）{
返回{
显示：！！（此。已展开）
}
},
模板：“”
});
window.app=新的Vue({
el:“#应用程序”
});

下拉内容
一种解决方案是为
下拉列表
组件实现一个
v型
，该组件允许您将
显示
属性双向绑定到父级中的属性。这样，您就不需要通过
插槽范围传递任何内容了

下面是一个例子：


Vue.component（'dropdown'{
道具：[‘值’]，
数据（）{
返回{
显示：！！（此.value）
}
},
观察：{
价值（价值）{
这是。$emit（'input'，value）；
}
},
模板：“”
});
新Vue({
el:“#应用程序”，
数据（）{
返回{dropdownToggle:false}
}
});

下拉内容
一种解决方案是为
下拉列表
组件实现一个
v型
，该组件允许您将
显示
属性双向绑定到父级中的属性。这样，您就不需要通过
插槽范围传递任何内容了

下面是一个例子：


Vue.component（'dropdown'{
道具：[‘值’]，
数据（）{
返回{
显示：！！（此.value）
}
},
观察：{
价值（价值）{
这是。$emit（'input'，value）；
}
},
模板：“”
});
新Vue({
el:“#应用程序”，
数据（）{
返回{dropdownToggle:false}
}
});

下拉内容
在收到thanksd的更正意见后更新。我在没有真正理解的情况下偶然找到了正确的答案

问题在于，在插槽中，
display
引用范围插槽对象中的项目。在那里更新它不会更新实际的源变量。如果传入并调用函数，则会更新相应的变量


Vue.component（'dropdown'{
道具：[“扩展”]，
数据：函数（）{
返回{
显示：布尔值（this.expanded）
}
},
方法：{
切换（）{
this.display=！this.display；
}
},
模板：“”
});
新Vue({
el:“#应用程序”
});

下拉内容
在收到thanksd的更正意见后更新。我在没有真正理解的情况下偶然找到了正确的答案

问题在于，在插槽中，
display
引用范围插槽对象中的项目。在那里更新它不会更新实际的源变量。如果传入并调用函数，则会更新相应的变量


Vue.component（'dropdown'{
道具：[“扩展”]，
数据：函数（）{
返回{
显示：布尔值（this.expanded）
}
},
方法：{
切换（）{
this.display=！this.display；
}
},
模板：“”
});
新Vue({
el:“#应用程序”
});

下拉内容
@click=“display=true”
只需始终将其设置为true即可
@click=“display=！display”
，也许？您所需要的只是
@click=“display=！display”
对于现在删除的答案中的更新，请尝试
@click。阻止
@click=“display=true”
只需始终将其设置为true即可
@click=“display=！display”
，也许？您所需要的只是
@click=“display=！display”
根据您现在删除的答案中的更新，尝试
@click.prevent
。我认为这是最好的解决方案，尽管如果您像Martyn在他的示例中那样使用对象解构，则无需命名作用域插槽对象。所以
slot scope=“ss”
可以是
slot scope=“{display，toggle}”
。答案的关键在于，添加
切换
方法并通过
插槽范围
传递它，允许父范围间接更新下拉组件实例的
显示
属性。Martyn示例的问题在于，他正在更新作用域槽中变量的属性，这与更新实例上的相关属性不同。感谢@thanksd对此的澄清。我已经相应地更新了我的答案。啊，这是有意义的，谢谢。我认为您可以直接从插槽中更改数据属性，因为我确信我以前在某个地方见过这样做，但是我可能弄错了。我想直接影响它的唯一原因是避免在不需要的情况下创建方法。如果数据属性是一个对象，则可以更改其成员并使这些更改反映在源对象中（因为对象副本是别名）。我认为这是最好的解决方案，尽管如果像Martyn在他的示例中所做的那样使用对象分解，那么没有必要命名作用域插槽对象。所以
slot scope=“ss”
可以是
slot scope=“{display，toggle}”
。答案的关键在于，添加
切换
方法并通过
插槽范围
传递它，允许父范围间接更新下拉组件实例的
显示
属性。Martyn示例的问题在于，他正在更新作用域槽中变量的属性，这与更新实例上的相关属性不同。感谢@thanksd对此的澄清。我已经相应地更新了我的答案。啊，这是有意义的，谢谢。我认为您可以直接从插槽中更改数据属性，因为我确信我以前在某些地方见过这样做，但是我可能弄错了