子组件实时更新、通用搜索函数、组件递归

这次主要记录一下最近遇到的一些印象比较深刻的问题以及解决方案

1. v-for循环的组件中，内嵌其他组件，用props给子组件传数据，当数据修改的时候，子组件无法及时更新

<template>
    <div>
        <div class="project-item"
             v-for="(item, index) in data"
             @click=changeData(item, index)
             :key="index">
            <!--这里是引用的其他组件-->
            <item-child
                 :data='item.childData'
                        >
    		</item-child>
    	</div>          
    </div>
</template>

这种情况下如果我们更新了data[i].childData这个对象里面的一个值该怎么办呢？两种方法：

定义ref，调用ItemChild组件里的初始化方法

<item-child
    :ref="'child'+index"
    :data='item.childData'>
</item-child>

这下循环里每个ItemChild组件都有了自己的ref，可以通过这个ref找到它。一般情况下，我们只需要使用上面的写法，但是现在的情况，外边有一层v-for循环，所以需要找到数组的第一个元素。在不确定数据解构的情况下，可以打开开发者工具里面的vue插件看一下组件结构，非常清楚的。由于我这里不太方便直接放出来，所以就不截图啦。

//修改数据之后触发的函数
changeData(item, index){
   
    item.newValue = 1;
    this.$refs[`video${
     index}`].initData()//调用子组件的初始化方法。×
    //实际上上面这种写法是错误的，控制台会报错。一般情况下我们可以使用这种方法。但是外边有一层v-for循环，所以实际上这个获取到的也是一个数组，应该用
    this.$refs[`video${
     index}`][0].initData()//调用子组件的初始化方法。√
}

上面这种方法虽然可以用，但是我的情况用这种方法会出现canvas画图是空白的情况，可能是我的触发时机早了，我用了延时并没有解决。所以我又想到了第二种方法

给子组件绑定key值，需要更改数据的事件更改key值

<item-child
    :key="item.changeTime"
    :data='item.childData'>
</item-child>

这时候修改数据就很简单了

//修改数据之后触发的函数
changeData(item, index){
   
   	item.newValue = 1