通过控制 ref 属性 上的值来控制元素显示与隐藏
问题描述:
<big-img ref="bigimg" :bigView="{imgSrc: 'http://www.baidu.com/img/bdlogo.png', showImg: false}" @cancelImg="cancelImg"></big-img>
<button @click="btnclick">点击显示图片</button>
btnclick() {
this.$refs.bigimg.bigView.showImg = true
console.log(this.$refs.bigimg.bigView)
},
cancelImg(val) {
this.$refs.bigimg.bigView.showImg = val
console.log(this.$refs.bigimg.bigView)
},
查看大图组件 控制图片是否显示问题 -- 遇到问了 , 为什么使用 ref 控制了showImg的值的改变,为神马showImg值改变了,但是图片还是不显示? 不知道为神马, 使用ref 改变的值
答
对象直接改值vue是监听不到的,而且你这边的bigView还不是响应式数据,你可以将bigView定义在data中,然后bigView = {...bigView,showImg: true },你这么写有点奇怪了。