通过控制 ref 属性 上的值来控制元素显示与隐藏

Question

    <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 改变的值

Answer 1

对象直接改值vue是监听不到的，而且你这边的bigView还不是响应式数据，你可以将bigView定义在data中，然后bigView = {...bigView,showImg: true }，你这么写有点奇怪了。