先搞清楚 props 里面的数据规则

    props: {
        // prop 是父组件传过来的数据，受父组件数据影响的

        //   如果是普通数据（数字、字符串、布尔值）绝对不能修改，即便改了也不回传导给父组件

        //   如果是引用类型（数组，对象）
        //      可以修改，例如：[].push() 对象.xxx = xxx
        //      不能重新赋值， xxx = []
    },

props 如下

    props: {
        arr: {
            type: Array,
            required:true
        }
    },

场景1：需对 arr 进行修改

假如我们在函数中对 arr 进行删除数据, arr 里面的数据被修改了，此时父组件的 arr 的数据也是会跟着改变

delete (index) {
    this.arr.splice(index,1)
}

场景2：需对 arr 赋值 为 [ ]

// 如果这样写，就会报错
<span @click="arr = []">全部删除</span>   

   
// 我们可以通过自定义事件 , 给父组件传一个函数，在父组件内对 arr = [ ]     
<span @click="$emit('clear-arr')">全部删除</span>

在父组件中：

<search
      @clear-arr = 'arr = []'
 />