介绍 export default {
,名字:& # 39;SwitchButton& # 39;
,道具:{
,,状态:{
,,,类型:布尔,
,,default (), {
,,,return 错误的
,,}
,,}
},
,data (), {
return {才能
,,,switchStatusData: this.status //,重新定义数据
,,}
},
,计算:{
,,switchStatus: function (), {
,,return this.status //,直接监听道具里的地位状态
,,}
,}
,}
} export default {
,名字:& # 39;SwitchButton& # 39;
,道具:{
,,状态:{
,,,类型:布尔,
,,default (), {
,,,return 错误的
,,}
,,}
},
,data (), {
return {才能
,,switchStatusData: this.status
,,}
},
,计算:{
,,switchStatus: function (), {
,,return this.switchStatusData //,监听switchStatusData 的变化
,,}
},
,看:{
status 才能;(newV, oldV),{,//看监听道具里地位的变化,然后执行操作
,,console.log (newV, oldV)
,,this.switchStatusData =newV
,,}
},
,方法:{
switchHandleClick 才能;(),{
,,this.switchStatusData =, ! this.switchStatusData
这。才能释放美元(& # 39;switchHandleClick& # 39;,, this.switchStatusData)
,,}
,}
} & lt; template>
,& lt; span 类=皊witch-bar",:类=皗& # 39;活跃# 39;:,switchStatus}“, @click=皊witchHandleClick"祝辞& lt; span 类=皊witch-btn"祝辞& lt;/span> & lt;/span>
& lt;/template>
& lt; script>
export default {
,名字:& # 39;SwitchButton& # 39;
,道具:{
,,状态:{
,,,类型:布尔,
,,default (), {
,,,return 错误的
,,}
,,}
},
,data (), {
return {才能
,,switchStatusData: this.status
,,}
},
,计算:{
,,switchStatus: function (), {
,,return this.status
,,}
},
,//手表:{
,//,status (newV, oldV), {
,//,,console.log (newV, oldV)
,//,,this.switchStatusData =newV
,//,,}
,//},
,方法:{
switchHandleClick 才能;(),{
,,this.switchStatusData =, ! this.switchStatusData
这。才能释放美元(& # 39;switchHandleClick& # 39;,, this.switchStatusData)
,,}
,}
}
& lt;/script>
& lt; style lang=皊tylus", scoped>
,@import “~风格/varibles.styl"
,.area-wrapper
,,行高:.8rem;
,,填充:0,.4rem;
.switch才能
,,,浮动:正确的;
,,,字体大小:0;
.switch-bar才能
,,,位置:相对;
,,,显示:inline-block;
,,,宽度:.8rem;
,,,身高:.4rem;
,,,这个特性:.4rem;
,,,背景:# ddd;
,,,边界:2 px solid # ddd;
,,,vertical-align:中间;
,,,转型:background 3,, border 3;
,,,.active
,,,背景:,我们美元;
边境:,,,,2 px solid 美元背景;
,,.switch-btn
,,,,左:,.4rem;
,,,,背景:,# fff;
.switch-btn才能
null
null
null
null
null
null
null
null
null
小编给大家分享一下VUE里子组件怎样获取父组件动态变化的值,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
在VUE里父组件给子组件间使用道具方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。
场景:子组件通过道具获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件。
比如想实现一个开关开关按钮的公用组件:
1。父组件可以向按钮组件传递默认值。
2。子组件的操作可以改变父组件的数据。
3。父组件修改传递给子组件的值,子组件能动态监听到改变。
比如父组件点击重置,开关组件的状态恢复为关闭状态:
方法1:
1,因为存在子组件要更改父组件传递过来的数据,但是直接操作道具里定义的数据VUE会报错,所以需要在数据里重新定义属性名并将道具里的数据接收。
2,首先想到的肯定是在计算计算属性里监听数据的变化,那就直接在计算里监听父组件传递过来的道具数据的变化,如果有变动就进行操作,如:
这样就可以在使用switchStatus的地方动态的监听到父组件状态的变化。似乎只针对简单的数据类型有效。
方法2:
使用观察和计算组合实现:如
下面是实现该组件的代码:
