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

通过控制 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)
        },


img

查看大图组件 控制图片是否显示问题 -- 遇到问了 , 为什么使用 ref 控制了showImg的值的改变,为神马showImg值改变了,但是图片还是不显示? 不知道为神马, 使用ref 改变的值

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