Vue2.x props在传值时设置默认值并监听是否改变

最新推荐文章于 2024-07-01 00:00:00 发布

否定不讽刺

最新推荐文章于 2024-07-01 00:00:00 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_38809672/article/details/122193910

版权

本文介绍了在Vue中如何从父组件向子组件传递数据，通过属性(props)实现父子组件间的通信。示例展示了如何在父组件模板中定义并传递propA和propB给子组件，并在子组件模板中展示接收到的值。此外，还提到了Prop验证的重要性，可以为组件的prop设置类型检查、必填、默认值等验证规则，确保数据正确性。同时，展示了使用watch监听prop变化时的处理方法逻辑，包括深度监听(deep)。

摘要由CSDN通过智能技术生成

父组件传值给子组件

简单举例
父组件代码：

<template>
  <div>
    i am parent
    <Children :propA="propA" :propB="propB"></Children>
  </div>
</template>

<script>
import Children from "./Children";
export default {
  name: "Parent",
  components: {
    Children,
  },
  data() {
    return {
      propA: 12,
      propB: "abc",
    };
  },
};
</script>

<style>
</style>

子组件代码：

<template>
  <div>i am children {{propA}} {{propB}}</div>
 
</template>

<script>
export default {
  name: "Children",
  props: {
    propA: Number,
    propB: String,
  },
};
</script>

<style>
</style>

效果图
在这里插入图片描述
12 abc都是父组件传给子组件的数据

Prop 验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: String,
    // 必填的字符串
    propC: {
      type: String
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

可见：vue官方文档

使用watch监听值是否变化

  watch: {
  //举例两个
    propA: {
      handler(newValue, oldValue) {
        func(); //值发生变化时的处理方法逻辑
      },
      deep: true, //深度监听
    },
    propB: {
      handler(newValue, oldValue) {
        func(); 
      },
      deep: true,
    },
  },