时间戳

首页 > 解决方案 > 在 vue.js 中将值放入从子级到父级的道具是错误

vue.js - 在 vue.js 中将值放入从子级到父级的道具是错误

问题描述

再会，

我正在尝试使用道具将值从孩子传递给父母，但我遇到了一个错误，

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "search"

这是我的示例代码：

父组件

<template>
<div>
    <child :search="search" />
</div>
</template>
<script>
export default(){
    data: ()=>({
        search: ''
    })
}
</script>

子组件

<template>
<div>
    <input type="text" v-model="search" />
</div>
</template>
<script>
export default{
    props: ['search']
    watch:{
         search(val){
             this.$emit('search', val);
         }
    }
}
</script>

我希望有人能帮助我。

标签： vue.js

解决方案

您正在将 v-model 绑定到搜索。因此，如果您在输入中输入 vue 来改变属性。这只是一个警告，表示数据将在下次更新时丢失，因为随后该属性将再次传递并且您的最后一个值将被覆盖。

你可以这样做：

孩子：

<template>
<div>
    <input type="text" v-model="search" />
</div>
</template>
<script>
export default{
    mounted () {
        this.searchForResult= this.search;
    },
    props: ['search'],
    data() {
        searchForResult: ''
    },
    watch:{
         searchForResult(val){
             this.$emit('search', val);
         }
    }
}
</script>

家长：

<template>
<div>
    <child :search="search" />
</div>
</template>
<script>
export default(){
    data: ()=>({
        search: ''
    })
}
</script>

还可以添加可以从父级调用的搜索方法。

推荐阅读