type
status
category
date
slug
summary
tags
icon
Last edited time
May 21, 2023 07:57 AM
1、组件的使用
- 注册一个组件
- 调用
2、局部注册组件
局部组件只能在注册他的父组件中使用
3、组件的注意事项
- data必须是一个函数
- 组件模板内容必须是单个根元素
可以使用div最外层,里面可以放多个标签
- 组件模板内容可以是模板字符串
- 组件命名方式
驼峰式驼峰式可以用在字符串模板中,但是如果作为普通的标签模板会出错HelloWord可以将其转化为短横线式->hello-world即可使用短横线式hello-world
4、组件间数据交互
- 父组件向子组件传值
组件内部通过props接收传递过来的值
父组件通过属性将值传递给子组件
props属性名规则在 propse 中使用驼峰式,模板中需要使用短的形式字符串形式的模板中没有这个眼制
props支持的数据类型字符串string数值number布尔值boolean数组Array对象Object
小tips:
如果父组件向子组件传数值的时候使用
pnum=12
则传递的是string类型 如果使用的是
:pnum='12'
则是number类型的值,可以进行计算 boolean也类似
- 子组件向父组件传值
- 子组件通过自定义事件向父组件传递信息
- 父组件监听子组件的事件
props传递数据原则单向数据流、父可以传递给子数据,不允许子组件直接操作props内容
传递方式
- 非父子组件间传值
单独的事件中心管理组件间的通信
5、组件插槽
- 组件插槽的作用
父组件向子组件传递内容
- 组件插槽基本用法
插槽位置
插槽内容
- 作用域插槽
父组件对子组件的内容进行加工处理