Vue.js vuejs2在父子级之间传递数据正在擦除子级的值

在VueJS 2中，我尝试创建一个组件，该组件获取数据并将其传递回父级，然后父级将数据传递给另一个组件以显示

获取数据的组件有一个用于搜索的用户输入字段。当我让它使用$emit将数据传递回父级时，输入中的值将一直被擦除

我收到下面的变异错误，但我没有直接尝试更改组件中的userSearch字段，所以我不知道为什么

避免直接变异道具，因为每当父组件重新呈现时，该值将被覆盖。相反，请使用基于道具值的数据或计算属性。正在变异的道具：“userSearch”（在PersonField中找到）

相关html

 <person-field  v-on:event_child="eventChild"></person-field>
 <person-search :prop="personListArray" ></person-search>

组件1，显示用户输入。使用输入搜索并返回数据。当输入的长度大于2时开始搜索。一旦你点击第三个字符，就会有什么东西导致输入被清除，我不想这样做

Vue.component('person-field', {
props: ['userSearch'],
template: '<input class="form-control" v-model="userSearch" >',
watch: {
    userSearch: function () {
        var arr = []
        if (typeof this.userSearch !== 'undefined') { //added this because once i passed 3 characters in the field the userSearch variable becomes undefined
            if (this.userSearch.length > 2) {

                $.each(this.getUsers(this.userSearch), function (index, value) {

                    var obj = {
                        Title: value.Title,
                        ID: value.ID
                    }

                    arr.push(obj)
                });

                this.$emit('event_child', arr) //emits the array back to parent "eventChild" method
            } else {
                console.log('no length')
            }
        } else {
            console.log('cant find field')
        }
    },
},
methods: {
    getUsers: function (filter) {
        //gets and returns an array using the filter as a search
        return arr
    },

 }
});

Vue.component（'person-field'{
道具：['userSearch']，
模板：“”，
观察：{
userSearch:function（）{
var arr=[]
如果（typeof this.userSearch！=='undefined'）{//添加了此项，因为一旦我在字段中传递了3个字符，userSearch变量将变得未定义
如果（this.userSearch.length>2）{
$.each（this.getUsers（this.userSearch））、函数（索引、值）{
var obj={
标题：价值，标题，
ID:value.ID
}
方位推力（obj）
});
此.emit（'event_child'，arr）//将数组发送回父“eventChild”方法
}否则{
console.log（'无长度'）
}
}否则{
console.log（'找不到字段'）
}
},
},
方法：{
getUsers:函数（过滤器）{
//获取并返回使用筛选器作为搜索的数组
返回arr
},
}
});

组件2-基于作为道具传递的personListArray，将结果显示为一个列表（这是可行的）

Vue.component（'person-search'{
道具：[“道具”]，
模板：'
'+
'' +
'' +
“
”，
计算：{
人员：职能部门（）{
把这个还给我
}
},
方法：{
fieldManagerTest:函数（标题，ID）{//通过单击删除项目按钮从用户购物车中删除项目
//var user=ID+“；#”+标题
//this.internalValue=true
//这是.$emit（'fieldManagerTest'）；
//此.$parent.$options.methods.selectManager（用户）
},
},
});

构成部分3，构成部分2的一部分

Vue.component('personli', {
    props: ['ID'],
    template: '<transition name="fade"><li class="moving-item" id="ID"><slot></slot></li></transition>'
})

Vue.component（'personli'{
道具：['ID']，
模板：'
'
})

---

)

你得到警告的原因

避免直接改变道具，因为该值将被覆盖 每当父组件重新渲染时。相反，请使用数据或 基于道具值计算的属性。正在变异的支柱： “用户搜索”（在PersonField中找到）

是因为这条线

<input class="form-control" v-model="userSearch" >

并修改您的

watch

以使用

searchValue

这是一个例子

Vue.component('personli', {
    props: ['ID'],
    template: '<transition name="fade"><li class="moving-item" id="ID"><slot></slot></li></transition>'
})

<input class="form-control" v-model="userSearch" >

Vue.component('person-field', {
    props: ['userSearch'],
    data(){
        return {
             searchValue: this.userSearch
        }
    },
    template: '<input class="form-control" v-model="searchValue" >',
    ...
})