vue组件之间的传值
1.父向子传值----通过poprs属性
父组件：
1.png
2.png
###父组件（占位符）上通过：属性名="属性值"来传给子组件
<home :ll='layout' :ll2='"qqqq"'></home>
###子组件通过props来接受可以为数组或者对象
//方法一
props:[' ll','ll2']
//方法二
props: {
ll: {type: String,default:'qqqqqq' },
ll2:{type:String,required:true}
},
2.子向父传值----通过子级触发父级的事件携带参数来传值
父组件：
4.png
6.png
子组件：
3.png
5.png
###父组件中
//1.标签上添加触发函数。例如：@ff="show"
//2.在methods中定义函数show
<home @ff='show'></home>
methods:{
show(qq){
console.log('接收子组件的值',qq);
this.fhome=qq
}
}
###子组件中
//1.标签上添加触发函数。例如：@click="tofather"
//2.在methods中定义函数tofather
//3.在函数tofather中，，通过this.$emit()来触发父组件中的ff函数，且携带阐述，以此来达到参数的传递，例如：this.$emit('ff','hh')
<button @click="tofather">home=>layout传值</button>
methods:{
tofather(){
this.$emit('ff',"hh")
},
}
3.非父子之间的传值---通过bus中间人 （可定义一个.js文件，也叫事件总线）
注意：使用此方法传值的两个组件必须是同时存在（其中一个组件不能销毁，不能是通过漏油的方式加载）
A组件传值到B组件
方法一：bug中间人直接在main.js里面注册 全局注册
main.js ：声明一个新的Vue实例对象，并且挂载到Vue的原型上
7.png
组件A（传参方）：A组件的点击事件。让Bus.$emit()触发一个mp的事件并携带参数
8.png
组件B（接受方）：B组件通过Bus.$on（）来监听mp事件的是否触发。并接收参数
9.png
方法一：bug中间人在自定义一个.js文件
10.png
4.vuex中数据的共享
4.1.state中的数据 ======>store中的数据仓库
介绍：单一状态树 > 用一个对象包含了所有应用层级的状态，作为唯一的数据源 > 利于我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个应用状态的快照
在组件中可以通过：
###方法一 直接获取
$store.state.数据名
###分离文件后的方法
//文件名：分离出来的文件的名。
//数据名：state里面的键
$store.state.文件名.数据名
###方法二 通过计算属性 computed
//1.先引入，，，将数据以计算属性的方式。当成自己的data值使用
import {mapState} from "vuex";
//在computed中展开
computed:{
...mapState({ 自定义名称: ["数据名"] }) //取别名
//直接使用
...mapState( ["数据名"] )
}
//例如：
computed:{
...mapState({ qq: ["login"] })
}
###分离文件后的方法
//1.先引入，，，将数据以计算属性的方式。当成自己的data值使用
import {mapState} from "vuex";
//在computed中展开
computed:{
...mapState({ 自定义名称: ["文件名"] })
}
//例如：
computed:{
...mapState({ aa: ["user"] })
}
###另一写法
computed:{
...mapState({
add: state => state.add,
counts: state => state.counts
})
}
4.2.mutations的操作=======>更改 Vuex 的 store 中的状态的唯一方法
不能写异步操作
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)
这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
你需要以相应的 type 调用 store.commit 方法
1. payload (提交载荷))
你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
载荷应该是一个对象，这样可以包含多个字段
规则：
vuex中的store中的状态是响应式的，那么当我们变更状态的时候，监视状态的Vue
组件也会自动更新，这也意味着Vuex中的mutation也需要与使用Vue一样遵守一些注意事项
1. 最好提前在你的store中初始化所有所需属性
2. 当需要在对象上添加新属性时，你应该用新对象替换老对象
Mutation必须是同步函数
一条重要的原则就是要记住 mutation 必须是同步函数
为什么： 如果mutation是异步函数，那么回调函数的执行难以控制，这就导致状态的改变不可追踪
本质： 实质上任何在回调函数中进行的状态的改变都是不可追踪的
执行代码：
###vuex中的写法：
mutations：{
函数名（state，'传参'）{
执行代码块。。。
}
}
###方法一：直接触发：
//组件通过$store.commit()
//commit：同步操作，写法：this.$store.commit('mutations方法名',参数值)
###方法二：通过导入mapMutattions函数。将需要的Mutattions函数，映射为当前组件的methods方法
//1.引入
import {mapMutations} from "vuex";
methods：{
...mapMutations(['ADD']，['ADD1'])
this.ADD('参数')
}
###方法二
methods：{
...mapMutations({
'ADD': 'ADD'
})
this.ADD('参数')
}
4.3.actions 的操作=======>用于处理异步操作
1. action提交的是mutation，而不是直接变更状态
2. action可以包含任意异步操作
3. Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters
分发Action
Action 通过 store.dispatch 方法触发
Actions 支持同样的载荷方式和对象方式进行分发
###vuex中写法：
actions：{
函数名：(context，'传参'){//context相当于当前的vuex.store实例对象
异步函数（（）=>{
context.commit('mutations的执行函数')
}）
}
}
###使用方法一
//将 this.commonActionGet() 映射为 this.$store.dispatch('事件函数名'，'传参')
methods:{
this.$store.dispatch('事件函数名'，'传参')
}
###使用方法二：通过导入mapActions函数。将需要的actions函数，映射为当前组件的methods方法
//引入计算属性
import {mapActions} from "vuex";
methods：{
...mapActions(['事件1', '事件2', '事件2', '事件4']),
触发事件函数(){
this.事件1()
this.事件2()
this.事件2()
}
}
// 第二种方式
methods：{
...mapActions({
'自定义名称1': '事件1',
'自定义名称2': '事件2',
'自定义名称3': '事件3',
'自定义名称4': '事件4'
}),
触发事件函数(){
this.自定义名称1()
this.事件2()
}
}
4.4. getter的操作 =======>用于用户地store中的数据进行加工处理形成新的数据
1.Getter可以对Store中已有的数据加工处理形成新的数据。类似Vue的计算属性
2.store中数据发生变化，Getter的数据也会跟着变化
###vuex中：
getter:{
事件名:state =>{
return state.变量名
}
}
###使用方法一：直接使用
this.$store.getter.名称 //名称为：getter的事件名
###使用方法二：通过导入mapGetters函数。将需要的getters函数，映射为当前组件的computed方法
//引入
improt {mapGetters} from "vuex"
computed：{
...mapGetters(['名称'])//名称为：getter的事件名
}
4.5.modules 的操作=======>用于vuex文件的分离。便于维护
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿
所以：Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
命名空间
可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可
1.引入单文件
2.在modules中注册单文件
11.png
在单文件中写入相关代码
12.png
访问单文件的state中的值：分离文件后的方法
//文件名：分离出来的文件的名。
//数据名：state里面的键
$store.state.文件名.数据名
访问单文件的的方法：直接访问，vuex会自动的进行查找，所以在方法命名时不能重复
