特性继承
在父组件中使用子组件时,如果给子组件 传入一些
非props
属性,那么这些属性会作用到子组件
的根元素
上
- props属性:
- 在组件使用的过程中经常出现父组件给子组件传参,
props
就是用来进行父传子的
- 在组件使用的过程中经常出现父组件给子组件传参,
- 非props属性:
- 父组件传给子组件中的属性,子组件没有通过
props
来接收
- 父组件传给子组件中的属性,子组件没有通过
- inheritAttrs:
inheritAttrs:true(默认)
启用特性继承inheritAttrs:false
:禁用特性继承- 注意点:特性继承对
class
&style
不起作用
$attrs
- 作用:
- 用来得到当前子组件中的所有
非props
属性
- 用来得到当前子组件中的所有
- 应用:
- 可以进行隔代传参 (父传参)
$listeners
- 作用:
- 用来得到父组件中传入到子组件中的所有的事件
- 应用:
- 可以进行孙传父
- 可以进行孙传父
eventbus
- 作用:进行组件之间的传参(侧重兄弟&隔代组件传参)
- 步骤:
- 1.0 准备 bus
export default new Vue()
- 2.0 组件1传入数据
bus.$emit(key,value)
- 3.0 组件2接收数据
bus.$on(key, value => {})
注意点:
- 是不是说 bus 中的这个事件,在打开 son2 时就已经执行了呢?
- 不是:因为
bus.$on
仅仅只是给 son2 注册了一个事件而已,真正的事件是在bus.$emit
时才会触发这个bus.$on
参数验证
- 作用:
- 用来规范父组件中传给子组件参数的规范
props: {
// 验证类型
xxx: String,
age: Number,
// 必填字段
myname: {
type: String,
required: true,
default: 'abc'
}
}
组件间的通信方式总结
方式:
- 1.$refs & $parents :
- 父传子(在子组件中得到父组件中的数据):
- 子组件中: this.$parent.xx
- 子传父:
- 父组件中: this.$refs.son.xx
- 侧重于:父子组件之间的传参
- 父传子(在子组件中得到父组件中的数据):
- 2.props & $emit
- 父传子:
- 传递:使用自定义属性传递
- 接收:使用 props 属性接收
- 子传父:
- 传递:使用 emit 事件传递
- 接收:使用事件来接收
- 侧重于:父子组件之间的传参
- 父传子:
- 3.vuex:
- 可以适用所有的场景
- 4.$attrs & $listeners
- 侧重于:隔代组件之间的传递
- 5.eventbus:
- 侧重于:兄弟 & 隔代组件之间的传值
注意点:页面之间传参与组件之间的传参是不一样的
- 页面之间的传参
- 直接带参数:
localhost:3000/#/news?id=111
- 取:
this.$route.query.id
- 取:
- 动态路由传参:localhost:3000/#/news/111
- 取:
this.$route.params.id
- 注意路由后
path: '/home/technicInfo/:id',
加了:id就一定要传 path: '/home/technicInfo/:id?',
加?就可传可不传
- 取:
- 直接带参数: