Vue父组件向子组件传值并监听值变化

最新推荐文章于 2024-08-06 10:28:17 发布

原创最新推荐文章于 2024-08-06 10:28:17 发布 · 3.5k 阅读

5 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Vue应用中实现父组件向子组件传值，包括使用props接收和处理数据，以及通过watch监听子组件属性变化。通过实例展示了如何在点击事件触发下更新数据并实时反映在子组件上。

一、父组件向子组件传值

父组件：

在这里插入图片描述

<template>
  <div>
      <div>
          <children :msg="sendData"></children>
          <button @click="upDate">改变</button>
      </div>
  </div>
</template>
<script>
import children from '@/components/children.vue'
export default {
  name: '',
  data () {
    return {
        sendData:'父组件数据'
    }
  },
  components:{
      children
  },
  methods:{
      upDate(){
          this.sendData='父组件给的值改变了'
      }
  }
}
</script>

子组件：

在这里插入图片描述

<template>
  <div>
    <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  props: ["msg"],
};
</script>

运行时的界面：

在这里插入图片描述

点击改变按钮后：

在这里插入图片描述

二、子组件监听值的变化

子组件：

在这里插入图片描述

增加代码：

watch: {
    msg: {
      handler(val) {
        console.log("msg change", val);
        //当监听的值发生改变后，可以在这里做些什么...
      },
      immediate: true, // 初次监听即执行
    },
  },