【Vue2】组件通信 之 props

Props 声明

• props 可以是 string[] / Object 的形式

sreing[] 写法

<template>
    <div>
        <!-- 设置自定义属性 (传递数据) -->
        <Son
            name="superman"
            age="21"
        />
    </div>
</template>

<script>
    import Son from './components/Son.vue';
    export default {
        name: 'App',
        components: { Son },
    };
</script>

<template>
    <div>
        <h2>姓名: {{ name }}</h2>
        <h2>年龄: {{ age }}</h2>
    </div>
</template>

<script>
    export default {
        name: 'Son',
        // 编写 props 配置项 (接收数据)
        props: ['name', 'age'],
    };
</script>

对象式写法（推荐）

<template>
    <div>
        <!-- 设置自定义属性 (传递数据) -->
        <Son
            name="superman"
            :age="21"
        />
        <!-- 注意, 这里使用 v-bind 绑定 age, 所以传递的是数值 -->
    </div>
</template>

<script>
    export default {
        name: 'Son',
        // 配置 props 属性 (接收数据)
        props: {
            name: String, // 限制 name 的属性值为 string 类型
            age: Number, // 限制 age 的属性值为 number 类型
        },
    };
</script>

传递 prop 的细节

• 可以在父组件中给子组件标签元素设置自定义属性 :prop-name="XXX" / :propName="XXX" 传递数据
  即可在子组件中通过 props: ["propName"] 接收数据
• 可以使用一个对象绑定多个 prop

// 假设有一个 post 对象
const post = {
    id: 1,
    title: 'My Journey with Vue',
};

<!-- 以下两种写法等效: -->
<BlogPost v-bind="post" />
<BlogPost
    :id="post.id"
    :title="post.title"
/>

单向数据流

• 每次父组件更新后，所有的子组件中的 props 都会被更新到最新值
• 因此，我们不可以在子组件中修改 props 传递过来的数据。否则：
  1. 控制台会发出警告（子组件中显示的数据还是会改变
  2. 一旦父组件的数据更新，子组件接收的对应数据也会被更新

<template>
    <div>
        <h1>{{ showApp() }}</h1>
        <button @click="num++">修改 age</button>
        <hr />
        <Son :age="num" />
    </div>
</template>

<script>
    import Son from './components/Son.vue';

    export default {
        name: 'App',
        components: { Son },
        data() {
            return { num: 21 };
        },
        methods: {
            showApp() {
                console.log('showApp');
                return 'App';
            },
        },
    };
</script>

<template>
    <div>
        <h2>{{ showSon() }}</h2>
        <h2>年龄: {{ age }}</h2>
        <button @click="age++">修改 age</button>
    </div>
</template>

<script>
    export default {
        name: 'Son',
        props: ['age'],
        methods: {
            showSon() {
                console.log('showSon');
                return 'Son';
            },
        },
    };
</script>

在子组件中 修改父组件传递过来的数据：控制台抛出警告、子组件的数据可以被成功修改、重新渲染子组件
参与子组件数据显示的方法 showSon，在页面完成时被调用一次；子组件修改数据后，重新渲染子组件，被调用一次

此时我们再在父组件中修改原数据，则子组件的数据也会被修改，就是说，子组件之前修改的数据会被覆盖
参与页面数据显示的方法 showApp、showSon，在页面完成时依次被调用一次；父组件修改数据后，页面重新渲染，再依次被调用一次

• 如果非得在子组件中获取并修改父组件传递的数据，我们可以将 props 中的数据赋值到 data 中
  此时我们操作的，其实就是子组件自己的数据啦

<template>
    <div>
        <h2>{{ showSon() }}</h2>
        <h2>年龄: {{ sonAge }}</h2>
        <button @click="sonAge++">修改 sonAge</button>
    </div>
</template>

<script>
    export default {
        name: 'Son',
        data() {
            return { sonAge: this.age }; // 将接收到的数据设置为组件自己的数据
        },
        props: ['age'],
        methods: {
            showSon() {
                console.log('showSon');
                return 'Son';
            },
        },
    };
</script>

此时，子组件渲染的是 data 中的数据 sonAge
更新子组件 data 中的数据，子组件会被重新渲染、showSon 被调用
更新父组件的数据，父组件会被重新渲染、showApp 被调用；此时子组件不会被重新渲染

注意：自己的数据不要与接收的数据同名，否则会报错（页面会优先显示 props 的数据

引用类型数据

• 因为是赋值处理，所以传递引用类型数据要特别注意，因为引用类型的数据操作的是地址
  此时，传递的是父组件的数据的引用；就是说，父子组件操作的是同一数据
• 在项目中，应该尽可能避免这样的更改，除非父子组件在设计上本来就需要紧密耦合

<template>
    <div>
        <h1>{{ showApp() }}</h1>
        <button @click="sonObj.num++">修改 age</button>
        <hr />
        <!-- 传入对象数据 -->
        <Son :ageObj="sonObj" />
    </div>
</template>

<script>
    import Son from './components/Son.vue';

    export default {
        name: 'App',
        components: { Son },
        data() {
            return { sonObj: { num: 21 } };
        },
        methods: {
            showApp() {
                console.log('showApp');
                return 'App';
            },
        },
    };
</script>

<template>
    <div>
        <h2>{{ showSon() }}</h2>
        <h2>年龄: {{ ageObj.num }}</h2>
        <!-- 直接修改对象数据 -->
        <button @click="ageObj.num++">修改 ageObj</button>
    </div>
</template>

<script>
    export default {
        name: 'Son',
        props: ['ageObj'], // 接收对象数据
        methods: {
            showSon() {
                console.log('showSon');
                return 'Son';
            },
        },
    };
</script>

可以发现，页面初始化时，showApp、showSon 依次被调用
不论在子组件还是在父组件中修改数据，都能成功修改数据、并重新渲染子组件模版，showSon 被调用

子组件传递数据给父组件

父组件给子组件传递函数，子组件给函数传入参数，从而实现子组件给父组件传递数据

1. 通过自定义属性，父组件给子组件传递函数
2. 子组件通过 props 属性接收该函数
3. 在调用该函数时，传入数据作为参数
4. 父组件就能 [以参数的形式] 接收到子组件传递过来的数据

<template>
    <div>
        <p>父组件数据：{{ msg }}</p>
        <hr />
        <!-- 给子组件绑定属性，传递方法 -->
        <Son :parentFun="parentFun" />
    </div>
</template>

<script>
    import Son from './components/Son.vue';
    export default {
        name: 'App',
        components: { Son },
        data() {
            return { msg: 'father' };
        },
        methods: {
            parentFun(val) {
                console.log('val', val);
                this.msg += val;
            },
        },
    };
</script>

<template>
    <div class="son">
        <!-- 调用方法，传入数据 -->
        <button @click="parentFun(sonMsg)">点击将子组件的数据传递给父组件</button>
    </div>
</template>

<script>
    export default {
        name: 'Son',
        props: ['parentFun'], // 设置 props 属性，接收方法
        data() {
            return { sonMsg: 'son' };
        },
    };
</script>

Prop 校验

{
    // 基础类型检查
    propA: Number, // 给出 `null` 和 `undefined` 值则会跳过任何类型检查
    // 多种可能的类型
    propB: [String, Number],
    // 必传, 且为 String 类型
    propC: {
        type: String,
        required: true
    },
    // Number 类型的默认值
    propD: {
        type: Number,
        default: 100
    },
    // 对象类型的默认值
    propE: {
        type: Object,
        // [对象] / [数组] 的默认值, 必须从一个工厂函数返回
        // 该函数接收组件所接收到的原始 prop 作为参数
        default(rawProps) {
            return { message: 'hello' }
        }
    },
    // 自定义类型校验函数
    propF: {
        validator(value) {
            // The value must match one of these strings
            // return false 则抛出警告 (开发模式下)
            return ['success', 'warning', 'danger'].includes(value)
        }
    },
    // 函数类型的默认值
    propG: {
        type: Function,
        // 不像对象或数组的默认, 这不是一个工厂函数. 这会是一个用来作为默认值的函数
        default() {
            return 'Default function'
        }
    }
}

一些个细节

• 所有 prop 默认都是可选的，除非声明了 required: true
• 除 Boolean 外的未传递的可选 prop 将会有一个默认值 undefined；Boolean 类型的未传递 prop 将被转换为 false
  这可以通过为它设置 default 来更改 —— eg：设置为 default: undefined 将与非布尔类型的 prop 的行为保持一致
• 如果声明了 default 值，那么在 prop 的值被解析为 undefined 时，无论 prop 是未被传递还是显式指明的 undefined，都会改为 default 值

prop 的类型

• 可以传递以下类型的数据：① String、② Number、③ Boolean、④ Symbol、⑤ Date、 ⑥ Array、⑦ Object、⑧ Function
• 另外，type 也可以是自定义的类或构造函数，Vue 将会通过 instanceof 来检查类型是否匹配

// 假设有 Person 类
class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

defineProps({
    author: Person, // 使用 Person 类约束类型
    // Vue 会通过 instanceof Person 来校验 author prop 的值是否是 Person 类的一个实例
});

Boolean 类型转换

// 假设组件设置如下 props
defineProps({
    disabled: Boolean,
});

<!-- 等同于传入 :disabled="true" -->
<MyComponent disabled />

<!-- 等同于传入 :disabled="false" -->
<MyComponent />

• 当一个 prop 被声明为允许多种类型时，无论声明类型的顺序如何，Boolean 类型的特殊转换规则都会被应用

defineProps({
    disabled: [Boolean, Number],
});