在VUE里父组件给子组件间使用props方式传递数据，但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。
场景：子组件通过props获取父组件传过来的数据，子组件存在操作传过来的数据并且传递给父组件。
比如想实现一个switch开关按钮的公用组件：
1.父组件可以向按钮组件传递默认值。
2.子组件的操作可以改变父组件的数据。
3.父组件修改传递给子组件的值，子组件能动态监听到改变。
比如父组件点击重置，开关组件的状态恢复为关闭状态：
方法1：
1、因为存在子组件要更改父组件传递过来的数据，但是直接操作props里定义的数据vue会报错，所以需要在data里重新定义属性名并将props里的数据接收。
2、首先想到的肯定是在computed计算属性里监听数据的变化，那就直接在computed里监听父组件传递过来的props数据的变化，如果有变动就进行操作，如：
export default {
name: 'SwitchButton',
props: {
status: {
type: Boolean,
default () {
return false
}
}
},
data () {
return {
switchStatusData: this.status // 重新定义数据
}
},
computed: {
switchStatus: function () {
return this.status // 直接监听props里的status状态
}
}
}
}
这样就可以在使用switchStatus的地方动态的监听到父组件status的变化。似乎只针对简单的数据类型有效。
方法2：
使用watch和computed组合实现：如
export default {
name: 'SwitchButton',
props: {
status: {
type: Boolean,
default () {
return false
}
}
},
data () {
return {
switchStatusData: this.status
}
},
computed: {
switchStatus: function () {
return this.switchStatusData // 监听switchStatusData 的变化
}
},
watch: {
status (newV, oldV) { // watch监听props里status的变化，然后执行操作
console.log(newV, oldV)
this.switchStatusData = newV
}
},
methods: {
switchHandleClick () {
this.switchStatusData = !this.switchStatusData
this.$emit('switchHandleClick', this.switchStatusData)
}
}
}
下面是实现该组件的代码：
<template>
<span class="switch-bar" :class="{'active': switchStatus}" @click="switchHandleClick"><span class="switch-btn"></span></span>
</template>
<script>
export default {
name: 'SwitchButton',
props: {
status: {
type: Boolean,
default () {
return false
}
}
},
data () {
return {
switchStatusData: this.status
}
},
computed: {
switchStatus: function () {
return this.status
}
},
// watch: {
// status (newV, oldV) {
// console.log(newV, oldV)
// this.switchStatusData = newV
// }
// },
methods: {
switchHandleClick () {
this.switchStatusData = !this.switchStatusData
this.$emit('switchHandleClick', this.switchStatusData)
}
}
}
</script>
<style lang="stylus" scoped>
@import "~styles/varibles.styl"
.area-wrapper
line-height: .8rem;
padding: 0 .4rem;
.switch
float: right;
font-size: 0;
.switch-bar
position: relative;
display: inline-block;
width: .8rem;
height: .4rem;
border-radius: .4rem;
background: #ddd;
border: 2px solid #ddd;
vertical-align: middle;
transition: background .3s, border .3s;
&.active
background: $bgColor;
border: 2px solid $bgColor;
.switch-btn
left: .4rem;
background: #fff;
.switch-btn
position: absolute;
left: 0px;
display: inline-block;
width: .4rem;
height: .4rem;
border-radius: .2rem;
background: #fff;
transition: background .3s, left .3s;
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
VUE,子组件获取父组件值
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。