zoukankan      html  css  js  c++  java
  • 10. Vue3父组件给子组件传值、Props、Props验证、单向数据流

    一、父子组件介绍

    image-20201029174738754.png

    二、父组件给子组件传值

    1、父组件调用子组件的时候传值

    <template>
        <v-header :title="title"></v-header>
    </template>
    
    <script>
    import Header from './Header'
    export default {
        data() {
            return {
                title: "首页组件title"
            }
        },  
        components: {
            "v-header": Header
        }
    }
    </script>

    2、子组件接收父组件传值

    <template>
        <header>{{title}}</header>
    </template>
    
    <script>
    export default {
        props: ["title"]
    }
    </script>

    三、Props验证

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

    props验证:

     props: {
        // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
        propA: Number,
        // 多个可能的类型
        propB: [String, Number],
        // 必填的字符串
        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
          }
        },
        // 具有默认值的函数
        propG: {
          type: Function,
          // 与对象或数组默认值不同,这不是一个工厂函数 —— 这是一个用作默认值的函数
          default: function() {
            return 'Default function'
          }
        }

    四、单向数据流

    所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。

    另外,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

  • 相关阅读:
    mysql 语句的查询过程解析
    postman 百度网盘下载 64位
    java 读取文内容(text,html)
    java把Word文件转成html的字符串返回出去
    spring boot 2.X上传文件限制大小
    nginx 做反向代理
    Linux下安装Redis
    微信小程序云开发个人博客项目实战(2)---引入-Vant-Weapp-小程序-UI-组件库
    微信小程序云开发个人博客项目实战(1)- 准备工作及引入 Vant Weapp 小程序 UI 组件库
    Video 视频播放防作弊和禁止下载
  • 原文地址:https://www.cnblogs.com/guxia/p/14391372.html
Copyright © 2011-2022 走看看