vue中父组件通过props传一个对象,子组件用来绑定样式,结果没有变化?

子组件通过props接受父组件传过来的arrange对象,然后用v-bind:style绑定样式,开始这个对象初始化时里面全是0。然后父组件里的这个arrange对象发生变化了,也传给子组件了,可子组件的样式却没有改变,是怎么回事呢??,代码:

//父组件里的template
<img-figure v-ref:img-figure :arrange="imgsArrangeArr[index]"></img-figure>

//子组件里接受
var imgFigure=Vue.extend({
    props:['arrange'],
    template:`
        <figure class="img-figure" v-bind:style="arrange.pos">
            <span>{{arrange.pos.left}}</span>
            <figcaption>
                <h2 class="img-title">{{item.title}}</h2>
            </figcaption>
        </figure>
    `
)}

结果图:
效果

传递应该是没有问题,现在问题是v-bind:style绑定的对象有变化了,可style却没有更新,求救

阅读 14.8k
3 个回答

题主如何修改arrange对象的值的?
图片描述
图片描述

我遇到相同的问题,arrange是整体发生变化,还是只是某些属性发生变化,如果是某些属性的话,是不会更新页面的,因为检测不到,你可以用watch去观察arrange,和观察你修改的属性,属性值才可以观察到,所以可以将这个属性值单独传,props:['arrange','top']

1.子组件注册了吗?
2.打印下arrange的值看看呢

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题