vue组件传参与vuex

vue组件概念

1.组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体，封装性和隔离性非常强。
2.组件化：
将一个具备完整功能的项目的一部分分割多处使用
加快项目的进度
可以进行项目的复用
3.组件注册分为：全局注册和局部注册

vue组件传参

在项目里，每个组件都是独立的，那么在进行调用的时候，该如何向子组件进行参数的传递呢？

父组件向子组件传参

:data="zha"
// 父组件传递名为data，值为zha的数据
props{
	data:{
		type:Array  //数据的类型
		default：[]  //默认值为空数组
	}
}
// 子组件利用props属性接收父组件传过来的数据

子组件向父组件传参

@click="$emit('data',item)"
// 子组件通过$emit属性向父组件传递名为data，职位item的数据
@data=""
//父组件接收发送过来的事件

子父根传参

$root 获取根组件
$parent 获取父组件
$children 获取子组件
$refs 组件获取组件实例，元素获取元素

project / inject

{
   	project() {
        return {
            parent: this
        }
    }
}
<!--子组件 注入-->
{
    inject: {
        parent: {
            from: 'parent',
            default: 222
        }
    }
}

vuex

概念及解释

vuex实现数据全局共享，响应式更新

1.state（存放状态）$store.store.xxx访问

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

2.mutations(改变数据的唯一方法)

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
$store.commit(“xxx”,data)

3.actions(异步操作数据的方法）

Action和Mutation相似，Mutation 不能进行异步操作，若要进行异步操作，就得使用Action
$store.dispatch.(“xxx”,data)

4.getters(从现有的状态计算新的数据）

类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据
$store.getters.xxx

5.modelu(子模块）

当遇见大型项目时，数据量大，store就会显得很臃肿
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：