vue中props赋值给data出现的问题及解决

目录 vue props赋值给data问题 props赋值给data 数据变化 例如

vue props赋值给data问题

vue 中父组件向子组件传递数据用 props, 但是子组件是无法修改它的。

如果子组件需要动态修改它就只能自造一个对应的 data 域。

比如：

components:{Tinymce},
? props:['id','formDatas'],
? data() {
? ? return {
? ? ? form: {
? ? ? ? title: '',
? ? ? ? title_type: '',
? ? ? ? push_date: '',
? ? ? ? source: '',
? ? ? ? title_introduce: '',
? ? ? ? title_content:'',
? ? ? }
? ? }
? },
? created(){
? ? this.form = this.formDatas
? },

这样是无法把props的值传递给data里面，因为data()只会运行一次，所以要用watch来进行监听props里面内容的变化，然后对data里面进行赋值

?watch:{
? ? formDatas(news,olds){
? ? ? this.form = news
? ? }
? }

因此当父组件传递值给子组件的时候，watch就会监听到formDatas的变化，将新的值赋给你想要传值的data，然后进行改变。

props赋值给data 数据变化

问题：当组件props里的某个值（a）（a值要是对象引用类型的数据）赋给了data对象里的某个值 (b); 当a值发生了变化，b值还是最开始的a值, 但实际应该是b值是最新的a值

例如

<template>
  
</template>
 
<script>
export default {
    name:'child '
    props:{
        a:{
            type:Object
        }
    },
    data(){
        return{
            b:this.a
        }
    },
    mounted(){
        console.log("b",this.b) //打印出来是a:{a1:1}
        //a值改变后打印b值
         console.log("b",this.b) //打印出来还是a:{a1:1}
    }
}
</script>
 
<style>
 
</style>
<!-------------------------------------------------------->
<template>
   <!---引用子组件--->
  <child :a="a"></child>
</template>
 
<script>
export default {
    data(){
        return{
            a:{
                a1:1
            }
        }
    },
    mounted(){
        //改变a值
        this.a.a1 = 2
    }
    
}
</script>
 
<style>
 
</style>

原因：因为data深拷贝的props的值，data无法随着props的变化而更新；

解决：watch、computed可以解决

<template>
??
</template>
?
<script>
export default {
? ? name:'child '
? ? props:{
? ? ? ? a:{
? ? ? ? ? ? type:Object
? ? ? ? }
? ? },
? ? data(){
? ? ? ? return{
? ? ? ? ? ? b:this.a
? ? ? ? }
? ? },
? ? watch:{
? ? ? ? a(val){
? ? ? ? ? ? //当a值变化时
? ? ? ? ? ? this.b = this.a
? ? ? ? }
? ? },
? ? mounted(){
? ? ? ? //a值改变后打印b值
? ? ? ? ?console.log("b",this.b) //打印出来就是最新值了 ? a:{a1:2}
? ? }
}
</script>
?
<style>
?
</style>

  

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue中props赋值给data出现的问题及解决的详细内容...