vue中 div高度随另一个div的高度变化

最近做了好几个项目，终于把手里的事情干完了，趁着这几天比较空整理一下最近遇到的一些问题以及解决方案。

问题描述：

in-wrap的高度不固定，会随着内容的多少改变，而out-wrap的高度则需要跟随in-wrap的变化而变化，代码如下：

<div class="out-wrap" id="out-border6">
</div>
<div class="in-wrap">
	<div class="text-wrap">
		<div class="contain">
			<div class="contain3">
				<span class="name2" v-for="(item, index) in unit.editorInChief" :key="index" style="width:18%">{{item}}
                </span >
            </div>
        </div>
    /div>
</div>

解决方案：

可以使用自定义指令的方式实现这一需求。
首先需要给in-wrap绑定指令：

 <div class="in-wrap" v-resize="resize">

自定义指令：

   directives: {  // 使用局部注册指令的方式
        resize: { // 指令的名称
            bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
                let width = '', height = '';
                function isReize() {
                    const style = document.defaultView.getComputedStyle(el);
                    if (width !== style.width || height !== style.height) {
                        binding.value(style.width,style.height);  // 关键 绑定函数
                    }
                    width = style.width;
                    height = style.height;
//                    console.log(height)
                }
                el.__vueSetInterval__ = setInterval(isReize, 300);
            },
            unbind(el) {
                clearInterval(el.__vueSetInterval__);
            }
        }
    },

指令绑定函数：

  resize(a,b){
            console.log(a,b)
            $("#out-border6").css('height',b)
        }

tips

在自定义指令中，是不能使用this去修改data中的值的，正确的做法应该是 使用binding.value.resize()去绑定一个函数，然后在绑定的函数中去修改data及其他操作。记住要在绑定指令的地方绑上函数：v-resize="resize"