vue之父子组件传值props

props

• 类型：Array<string> | Object

• 详细：

  props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

  你可以基于对象的语法使用以下选项：

  • type: 可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
  • default: any
    为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
  • required: Boolean
    定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
  • validator: Function
    自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

为什么要使用props

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

下面用代码来解释（可直接使用）

父组件代码：

<template>
    <div class="w-jz">
        <PropsDemo
                :title="title"
                :authors="authors"
                :contents="contents"
        >
        </PropsDemo>
    </div>
</template>

<script>
    import PropsDemo from '@testCp/PropsDemo'

    export default {
        components: {
            PropsDemo
        },
        data () {
            return {
                title: 'success',
                authors: [
                    {name: 'one', age: 1},
                    {name: 'two', age: 2},
                    {name: 'three', age: 3},
                ],
                contents: {type: 'haha', time: 120}
            }
        },
    }
</script>

子组件代码：（公共的组件）

<template>
    <div :style="{backgroundImage: 'url('+src+')'}">
        <div style="text-align: center">
            <div style="font-size: 16px;">
                字符串：{{title}}
            </div>
            <ul v-show="showAuthor">数组类型：
                <li v-for="(author, index) in authors" :key="index">{{author.name}}</li>
            </ul>
            <div style="margin-bottom: 3%">数值类型：{{num}}</div>
            <p v-for="(item, key) in authors[0]" :key="key">对象类型1：{{key}}---{{item}}</p>
            <p>对象类型2：{{contents}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        props: { // String Number Boolean Array Object Function
            title: {
                // validator自定义验证，当propsView文件title传入的值
                // 不是validator中定义的'success', 'warning', 'danger'
                // 报错：Invalid prop: custom validator check failed for prop "title".
                type: String,
                validator (value) {
                    // 这个值必须匹配下列字符串中的一个
                    return ['success', 'warning', 'danger'].indexOf(value) !== -1
                }
            },
            num: { // 使用default定义默认值，当propsView文件没有把num传入则会使用默认值
                type: Number,
                default: 111
            },
            showAuthor: { // 是否显示
                // 使用default定义默认值，当propsView文件没有把showAuthor传入则会使用默认值
                type: Boolean,
                default: false
            },
            authors: {
                // required定义该 prop 是否是必填项
                // 如果没传报错：Missing required prop: "authors"
                type: Array,
                required: true
            },
            contents: {
                type: Object,
                // 对象或数组默认值必须从一个工厂函数获取
                // 如果写成 default: {message: 'hello'} 非工厂函数
                // 报错 Invalid default value for prop "contents":
                // Props with type Object/Array must use a factory function to return the default value.
                // 当没传当前props值的时候才会出现
                default: function () {
                    return { message: 'hello' }
                }
            },
        },
        data () {
            return {
                src: 'https://cdn.nlark.com/yuque/0/2019/jpeg/280373/1564724418389-assets/web-upload/c727b73d-67be-41c0-a369-d7636b3dcd01.jpeg',
            }
        },
    }
</script>