vuejs2在父子之间传递数据正在擦除子值

Posted 2023-02-22

【中文标题】vuejs2在父子之间传递数据正在擦除子值

【英文标题】：vuejs2 passing data between parent-child is wiping childs value

【发布时间】：2017-09-13 16:58:23

【问题描述】：

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

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

我收到以下突变错误，但我没有直接尝试更改组件中的 userSearch 字段，所以我不确定为什么。

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

相关的html

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

父应用

var app = new Vue(
el: '#app',
data: 
    personListArray : [],
    tempArray: []
,
methods: 
    eventChild: function (arr) 
        this.personListArray = arr
    

)

组件 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
    ,

 
);

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

Vue.component('person-search', 
props: ['prop'],
template: '<ul id="personList">' +
'<personli :ID="person.ID" v-for="person in persons">' +
'<a class="" href="#" v-on:click="fieldManagerTest(person.Title, person.ID)">person.Title</a>' +
'</personli></ul>',
computed: 
    persons: function () 
        return this.prop
    
,
methods: 
    fieldManagerTest: function (title, ID)  //Remove item from users cart triggered via click of remove item button

        //var user = ID + ';#' + title
        //this.internalValue = true
        //this.$emit('fieldManagerTest');
        //this.$parent.$options.methods.selectManager(user)
    ,
,

);

组件 3，组件 2 的一部分

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

;

【参考方案1】：

您收到警告的原因，

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

是因为这条线

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

v-model 将尝试更改您告诉它的表达式的值，在本例中为 userSearch，这是一个属性。

相反，您可以将userSearch 复制到局部变量中。

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

并修改您的watch 以使用searchValue。

这是example。