Vue学习笔记7:vue3组件化开发(1)-组件通信

86 阅读1分钟

1.父组件向子组件通信

1.1 props的数组用法

子组件

image.png

父组件

image.png

1.2 props的对象写法

可以指定类型,require,默认值等

image.png

如果某个prop为对象类型,则默认值需用函数返回:

image.png

prop的自定义验证函数:

image.png

注意:在书写attribute时,由于浏览器对大小写不敏感,驼峰写法需要使用等价的短横线写法替换

1.3 非prop的attribute值

当我们传递给一个组件某个属性,但是该属性并没有定义对应的props或者emits时,就称之为 非Prop的

Attribute;常见的包括class、style、id属性等;

Attribute继承:

当组件有单个根节点时,非Prop的Attribute将自动添加到根节点的Attribute中

如果我们不希望组件的根元素继承attribute,可以在组件中设置 inheritAttrs: false:

image.png

通过 $attrs来访问所有的 非props的attribute:

父组件:

image.png

子组件:

image.png

2.子组件向父组件通信

通过$emit

子组件

image.png

父组件

image.png

emits对象写法: 对传递的参数进行验证:

image.png