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会自动的进行查找，所以在方法命名时不能重复