应用场景

在vue中父子组件是通过props传递数据的。通常有以下几种场景：

• 子组件展示父组件传递过来的props，一般是字符串
• 子组件通过父组件的props计算得到某个值
• 子组件修改父组件传递过来的props

1.computed 计算属性

使用场景：当pros传递过来的值不能直接使用的时候，就可以使用计算属性了。
比如：完整的地址需要将省市区3个字段拼接后展示。

计算属性是基于依赖进行缓存的，当props不变时，多次访问addrese计算属性，会立即返回结果，而不必再次执行计算。

props: {
  province: String, // 省
  city: String, // 市
  area: String // 区
},
computed: {
  address(){
    return `${this.province}${this.city}${this.area}`
  }
}

2.methods 方法

上面计算属性，通过methods也可以实现，但methods不会进行缓存，而且methods通常用来处理业务逻辑。

3.watch 侦听器

使用场景：将传递过来的props作为初始值，比如城市选择列表的默认城市，我们希望选择城市时，改变这个值。

单向数据流

父级 prop 的更新会向下流动到子组件中。

当我们需要在子组件中修改父组件传递过来的props时，如果直接更改，vue会报错的，因为如果子组件直接更改父组件的props，会使应用的数据流向难以理解。

解决方案

为了不直接修改props的值，可以在data中，用props初始化一个data属性，以后更改这个data属性即可。

但是这会导致，父组件变化时，该data属性不会更新(注意：只针对基本类型，如果是引用类型，仍旧是变化的。因为引用类型的内存地址没变)

此时为了更新这个data属性，就需要使用侦听器来监听props的变化。

深度监听

使用场景：当监听到某个值变化后，执行异步请求。
此时computed和methods都不太合适。

• 基本类型

watch: {
   msg(newV,oldV) {
     // do something
     console.log(newV,oldV)
   } 
}

• 引用类型

1. 计算属性(推荐)
   先通过计算属性得到引用类型的内部某个字段，再使用侦听器监听该字段的变化

  props:{
    config:Object
  },
  computed: {
      isShow() { 
          return this.config.role.isShow
      }
  },
  watch: {
      isShow(newV,oldV) {
          // do something
          console.log(newV,oldV)
      }
  }

2. deep

 props:{
    config:Object
  },
  watch: {
    isShow:{ //深度监听，可监听到对象、数组的变化
        handler (newV, oldV) {
          // do something, 可使用this
          console.log(newV,oldV)
        },
        deep:true
       }
  },

3. 监听对象中的某个值

props:{
    option:Object
  },
  watch:{
    'option.text'(newVal,oldVal){
          console.log(newVal,oldVal);
    }
}

关于Vue中watch的详细用法见： https://blog.csdn.net/a1056244734/article/details/120790921

参考文章：vue props监听变化的几种方式

发现问题

在vue项目中，父子组件数据传递是最常见的场景，但是今天在开发过程中父级数据传递到子组件，控制子组件的显隐，发现存在问题，一直监听不到数据的变化，详细排查后发现是因为props在传递数据的时候子组件接收到数据后没有及时发生变化导致的。

这里使用的是 iview 框架

// 子组件
<template>
    <Modal
        v-model="isShowModel"
        title="测试弹窗">
        <p>Content of dialog</p>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
    </Modal>
</template>

<script>
export default {
    name: 'TestModel',
    props: {
        showModel: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isShowModel: this.showModel
        }
    }
}
</script>

// 父组件
<template>
  <div id="app">
    <TestModel :showModel="showModel"></TestModel>
    <Button type="primary" @click="changeShowModel">显示弹窗</Button>
  </div>
</template>

<script>
import TestModel from './components/TestModel.vue'

export default {
  components: {
    TestModel
  },
  data() {
    return {
      showModel: false,
    }
  },
  methods: {
    changeShowModel() {
      this.showModel = true;
    }
  }
}
</script>

问题分析

预期效果是点击按钮直接弹出弹窗，结果怎么也弹不出来。子组件中增加 watch 监听 props 发现数据已经变化了，但是 data 中接收 props 数据的变量并未改变，发现问题所在。

问题原因就是接收 props 数据的变量无法及时响应 props 的变化，下一步解决问题就是重点解决响应变化问题。

问题解决

解决方案1

子组件中增加 watch 监听 props 中传进来的数据变化，同时当子组件数据变化时，数据上传父组件。

// 子组件
<template>
    <Modal
        v-model="isShowModel"
        width="1000"
        title="测试弹窗"
        @on-cancel="cancel"    
    >
        <p>Content of dialog</p>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
    </Modal>
</template>

<script>
export default {
    name: 'TestModel',
    props: {
        showModel: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isShowModel: this.showModel
        }
    },
    watch: {
        showModel(v) {
            this.isShowModel = this.showModel
        }
    },
    methods: {
        cancel() {
            this.$emit('cancel', this.isShowModel);
        }
    }
}
</script>

// 父组件
methods: {
    modelCancel(v) {
        this.showModel = v;
    }
}

解决方案2

使用 vue 中的计算属性( computed )中的 set 方法。

// 子组件
<template>
    <Modal
        v-model="isShowModel"
        width="1000"
        title="测试弹窗"
    >
        <p>Content of dialog</p>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
    </Modal>
</template>

<script>
export default {
    name: 'TestModel',
    props: {
        showModel: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        isShowModel: {
            set(v) {
                this.$emit('cancel', v);
            },
            get() {
                return this.showModel;
            }
        }
    },
}
</script>

有兴趣的兄弟可以关注我的博客 www.maple.ink

监听VUEX变化

首先在想要监听的组件里面 利用computed
注意：一定要return
这里监听一个已经存在vuex里面的liveheader值

  computed: {
    liveheaderfn() {
      return this.$store.state.liveheader;
    },
  },

首先在想要监听的组件里面 利用watch
然后在这个函数里面做你想要做的逻辑即可
将newValue 赋值给 本组件的一个变量liveheader

  watch: {
    liveheaderfn(newValue) {
      console.log(newValue);
      this.liveheader = newValue
    },
  },

监听props变化

首先在想要监听的组件里面 利用computed
接受一下props

  props: ["itemChild"],

注意：一定要return

  computed: {
    itemChildfn() {
      if (this.itemChild != false) {
        return this.itemChild;
      }
    },
  },

利用watch监听变化
将newValue 赋值给 本组件的一个变量child

  watch: {
    itemChildfn(newValue) {
      this.child = newValue;
    },
  },