vue组件传值方式
- props
- $emit
- ref
- eventbus
- $parent / $children / $root
- vuex
- sessionStorage、localStorage、路由传参（也是传值） 这些传值方式都太常见了
- provide / inject
- $attrs / $listeners
- observable
# provide/ inject
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。（官方文档描述）
# $attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
inheritAttrs: false的含义是不希望本组件的根元素继承父组件的attribute，同时父组件传过来的属性（没有被子组件的props接收的属性），也不会显示在子组件的dom元素上，但是在组件里可以通过其$attrs 可以获取到没有使用的注册属性, inheritAttrs: false是不会影响 style 和 class 的绑定
v - bind = "$attr";
# $listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
# observable 实现状态管理
让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：
const state = Vue.observable({ count: 0 });
const Demo = {
render(h) {
return h(
"button",
{
on: {
click: () => {
state.count++;
},
},
},
`count is: ${state.count}`
);
},
};
# 思考
A,B,C 三个组件依次嵌套，正常状态下，B 组件使用 v-bind='$attrs'，C 组件就可以受到 A 传递的所有属性，但是当 B 组件使用了 Props 接收了某个属性，C 组件就接不到这个属性了，只能接受到除了这个属性的所有属性
组件 A
<template>
<div>
<B :a="a" :b="b" :c="c" :d="d" :e="e" />
</div>
</template>
<script type="text/javascript">
export default {
data() {
return { a: "1", b: "2", c: "3", d: "4", e: "5" };
},
};
</script>
组件 B
<template>
<div>
<C v-bind="$attrs" />
</div>
</template>
<script type="text/javascript">
export default {
props: {
a: String, // 如果这里有a，那么C组件将接收不到a
},
};
</script>
组件 C
<template>
<div></div>
</template>
<script type="text/javascript">
export default {
props: {
a: String,
b: String,
c: String,
d: String,
e: String,
},
};
</script>