vue组件之间的传值的方式

一、父子组件之间的传值

1.父组件向子组件传值：

1. 子组件在props中创建一个属性，用以接收父组件传来的值
2. 父组件中注册子组件
3. 在子组件标签中添加子组件props中创建的属性
4. 把需要传给子组件的值赋给该属性

2.子组件向父组件传值

1. 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2. 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3. 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在子组件中创建一个按钮，给按钮绑定一个点击事件
在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

// 发送事件
this.$emit('clickit').

<big-img @clickit="viewImg"></big-img>

clickImg(e) {
    this.showImg = true;
    // 获取当前图片地址
    console.log(e);
    this.imgSrc = e.currentTarget.src;
}

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了
看这个博客

二、通过路由带参数传值

两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）

两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）

在B组件中获取A组件传递过来的参数、

this.$route.query.orderId

更加详细的代码
$路由模块的配置$

 {
      name: 'mvplay',
      path: '/mvplay',
      component: MvPlay  
 }

1.使用$router.push 拼接参数传参

this.$router.push('/mvplay?editType=add') //其中editType=add即为传递的参数

2.使用name来确定匹配的路由，通过params来传递参数$用这种方式时，必须要用name来指定路径，而不能用path$

 this.$router.push({
        name: "mvplay",
        params: {
          mvId:this.discList[index].vid
        }
      });

2.使用path来匹配路由，然后通过query来传递参数$用这种方式时，必须要用path来指定路径，而不能用name$

 this.$router.push({
        path: "/mvplay",
        query: {
          mvId:this.discList[index].vid
        }
      });

注意path不能与params一起使用，需要通过path来匹配路由的时候，使用query来传参。
query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.route.query.name和this.route.query.name和this.route.query.name和this.route.params.name

query更加类似于我们ajax中get传参，params则类似于post，前者在浏览器地址栏中显示参数，后者则不显示*

---

三、安装、使用 vuex

// 安装vuex
npm install vuex --save

1.在src目录下新建store文件夹并在该文件夹下新建index.js文件。 在 store/index.js写入：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  strict:true,  // 开启严格模式  确保state 中的数据只能 mutations 修改
  state:{
    count:0
  }
})

export default store;

在main.js中引入：

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

此时可以在组件中使用 this.$store.state.count 获取store中state的值。如：

// 在组件的computed中使用
  computed:{
     count(){
      return this.$store.state.count;
     }
  }

<template>
<div class="hello">
  <h2>{{count}}</h2>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
computed:{
   count(){
     return this.$store.state.count;
   }
}
}
</script>

很多时候咱们要对state里的值进行操作，在vuex提供了一个方法mutations
mutations用法(使用mutations可以修改state的值)
在store/index.js中写入：

//
...
  state:{
    count:0
  },
  mutations:{ // 更改数据的方法
    add(state){
      state.count++
    },
    //提交载荷用法
//     add(state,n){  
//      state.count += n
//    },
    sub(state){
      state.count--
    }
  }
...
//

在组件中使用mutations中对应的方法

<template>
  <div class="hello">
    <button @click="add">+</button>
    <h2>{{count}}</h2>
    <button @click="sub">-</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  computed:{
     count(){
       return this.$store.state.count;
     }
  },
    methods:{
    add(){
      this.$store.commit('add');
    },
    
    //提交载荷用法
   // add(){  
   //    this.$store.commit('add',10);
   // },
   
   //对象风格的提交方式
   //   store.commit({
   //     type: 'add',
   //     n: 10
   //     })
   
    sub(){
      this.$store.commit('sub');
    }
  }
}
</script>

此时就可以对count进行修改了。
$补充1：mutation接收单个参数和多个参数$
利用$store.commit 里面 写参数相当于 mutation的函数名字

在组件里面：
    第一种方式： this.$store.commit("addIncrement",{name:'stark',age:18,n:5})
    第二种方式：
    this.$store.commit({
        type:"addIncrement",
        n:5,
        age:18,
        name:'stark.wang'
    })

在vuex里面接收：接收第二个参数相当于前面传过来的参数，如果多个这个就是对象，如果是一个参数，这个第二个参数payload就是前面的参数，例如

let store = new Vuex.Store({
    state: {
        num: 100
    },
    mutations: {
        // 任何时候改变state的状态都通过提交 mutation 来改变
        // 里面可以定义多个函数，当触发这个函数就会改变state状态
        addIncrement(state, stark) {
            console.log(stark);
            // 接收一个state作为参数， 相当于上面的state
             // 在vuex里面接收：接收第二个参数相当于前面传过来的参数，如果多个这个就是对象，如果是一个参数，这个第二个参数payload就是前面的参数。
            // mutations设计原则是同步的
            //state.num += stark;
            state.num += stark.n;
        

        },
        minIncrement(state) {
            state.num -= 5;
        }
    }

})

KaTeX parse error: Undefined control sequence: \clolor at position 1: \̲c̲l̲o̲l̲o̲r̲{red}{补充2：遇到在组件…
在组件中写入

<div class="form-control amis-control">
　　<input name="name" placeholder="" type="text" autocomplete="off" :value="activeFormData.title" @input="updataMessage($event,'t1.title')">
</div>

<script>
...
computed:{
　　activeFormData(){
　　　　return this.$store.state.formData.t1
　　}
},
methods:{
　　updataMessage(e,dataposition){
　　　　let newposition = dataposition.split('.);
　　　　this.$store.commit('updataMessage',{newval:e.target.value,curposition:newposition})
　　}
}
</script>

在store.js中写入

mutations:{
  ...
　　updataMessage(state, stark) {
      if (stark.curposition.length == 2) {
        state.formData[stark.curposition[0]][stark.curposition[1]] = stark.newval
      } else if (stark.curposition.length == 3) {
        state.formData[stark.curposition[0]][stark.curposition[1]][stark.curposition[2]] = stark.newval
      }
    },  
}