Vue中props选项用法详解

2024-07-17 12:16| 来源: 网络整理| 查看: 265

Vue中子组件不能直接引用父组件的数据，需要通过props选项接收来自父组件的数据。参考：https://cn.vuejs.org/v2/api/#props

props 的写法

props 可以是数组或对象

props为数组父组件 import Child from './components/Child' export default { components: { Child }， data () { return { article: { id: 1, openReading: true, title: 'title', tags: ['vue', 'js'], author: { name: 'Jack' } } } } }

本例中，如果希望将article对象的所有属性都作为 prop 传入，可以使用不带参数的 v-bind

子组件 {{id}} - {{openReading}} -{{title}}-{{tags}}-{{author.name}} export default { props: ['id', 'openReading', 'title', 'tags', 'author'] }

给子组件prop 传入一个静态的值，该值将会是个字符串，如通过v-bind:(简写为：)传入则为一个表达式，通过这个方式即可为子组件传入动态的任意类型的值。上例中，子组件得到的数据id为字符串1，openReading为布尔值true，title为字符串title，tags为数组[‘vue’, ‘js’],propE为对象{name: ‘Jack’}。

props为对象

在合作开发中，为了组件的健壮和可读性等需求，通常我们希望每个 prop 都有指定的值类型，默认值甚至验证传入的值是否规范等等，如将props设置为对象，则允许配置高级选项，如类型检测、自定义验证和设置默认值。通过这些设置，遇到错误时浏览器的 JavaScript 控制台将会提示用户.

可使用的选项： type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。default：any 指定默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个函数返回。required：Boolean 用户定义该 prop 是否是必填项。validator：Function

将子组件的配置项

props: ['id', 'openReading', 'title', 'tags', 'author']

改为：

props: { id: { // 多个可能的类型 type: [String, Number], required: true, // 自定义验证函数 validator: (value) => { return parseInt(value) >= 0 } }, openReading: { type: Boolean, default: true }, title: { type: String, default: '' }, tags: { type: Array, default: () => [] // 对象或数组默认值必须从一个函数获取 }, author: { type: Object, default: () => {} // 对象或数组默认值必须从一个函数获取 } } Prop 的大小写

如果组件位于HTML中，必须将驼峰命名法的prop名改写为其等价的 kebab-case (短横线分隔命名) ，其他情况下两种写法等价。

let Child = { template: `{{parentTitle}}`, props:['parentTitle'] } new Vue({ el:"#app", components: {Child} }); 使用.sync修饰符实现prop"双向绑定"

父组件

子组件

this.$emit('update:openReading', !this.openReading)

其中:openReading.sync="article.openReading"只是v-bind:openReading=“article.openReading” v-on:update:openReading="article.openReading= $event"的简写形式，并没有改变单向数据流使用sync修饰符的时候，子组件传递的事件名必须为update:value，value必须与子组件中props中声明的名称完全一致(如上例中的openReading，不能使用open-reading

监听prop变化

如果来自父组件的prop发生了变化，在子组件生命周期beforeUpdate、updated能够监听到，通常子组件监听数据变化用watch监听数据变化如下，监听id的变化

watch: { id: { handler (nVal, oVal) { console.log(nVal, oVal) }, immediate: true // 该回调将会在侦听开始之后被立即调用 } }

本例中，第一次打印出的数据是1 undefined

非Prop的 Attribute

指传向一个组件,但是该组件并没有相应 prop 定义的 attribute。

class将会自动挂载到子组件组件的组件根元素上，组件可以接受任意的 attribute 在这里插入图片描述

替换与合并

组件内部的Attribute与外部提供的Attribute发生重名的情况时，值会发生替换或合并子组件

{{id}} - {{openReading}} -{{title}}-{{tags}}-{{author.name}}

在这里插入图片描述 class 和 style和合并Attribute的值，其他的attribute ，父组件提供的值会替换掉组件内部设置好的值。

禁用

如果想禁用非 props 的 Attribute 属性的方法，可以给子组件增加配置项

inheritAttrs: false

在这里插入图片描述 inheritAttrs: false 选项不会影响 style 和 class 的绑定。

通过inheritAttrs: false 和组件的$attrs，可以手动决定 attribute 被赋予哪个元素子组件

{{id}} - {{openReading}} -{{title}}-{{tags}}-{{author.name}}

在这里插入图片描述

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章