一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。
一、props/$emit
父组件给子组件传值
父组件给子组件传值
//父组件
//引入的add-child组件
// 冒号为v-bind 的缩写
<add-child :msg="msg" /> //这里必须要用 - 代替驼峰
data(){
return {
msg: [1,2,3]
};
}
子组件通过props来接收数据：
//方式1：
props: ['msg']
//方式2 :
props: {
msg: Array //这样可以指定传入的类型，如果类型不对，会警告
}
//方式3：
props: {
msg: {
type: Array, //指定传入的类型
//type 也可以是一个自定义构造器函数，使用 instanceof 检测。
default: [0,0,0] //这样可以指定默认的值
}
}
子组件给父组件传值
配合事件名$emit使用。
Vue.component('welcome-button', {
template: `
<button v-on:click="$emit('welcome')">
Click me to be welcomed
</button> `
})
<div id="emit-example-simple">
<welcome-button v-on:welcome="sayHi"></welcome-button> </div>
new Vue({
el: '#emit-example-simple',
methods: {
sayHi: function () { alert('Hi!') }
}
})
二、$emit/$on
$emit见上面子组件给父组件传值
三、vuex
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：
Flux 架构就像眼镜：您自会知道什么时候需要它。
四、$attrs / $listeners
- $attrs是在vue的2.40版本以上添加的。
- 项目中有多层组件传参可以使用$attrs，可以使代码更加美观，更加简洁，维护代码的时候更方便。如果使用普通的父子组件传参prop和on会很繁琐；如果使用vuex会大材小用，只是在这几个组件中使用，没必要使用vuex；使用事件总线eventBus，使用不恰当的话，有可能会出现事件多次执行。
五、provide/inject
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。
使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据
六、$parent / $children 与 ref
- $parent / $children:访问父/子实例，需要注意的是：这两种都是直接得到组件实例，使用后可以直接调用组件的方法或者访问数据。
- ref：如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用的就是组件实例。
