Vue中组件之间通信

父子之间的传值

• 父组件传递给子组件值

1. 父组件中引入子组件，并注册子组件(就是引入该组件)
2. 父组件中使用子组件
3. 父组件调用子组件时使用 v-bind 绑定传递给子组件的值
4. 在子组件中使用 props 接收传递到的值

• 子组件传递给父组件值

1. 在子组件中使用 ‘this.$emit(‘自定义方法名’，值)’，如下：

2. <p @click="SendMsg">登陆</p>
   
   //methods方法中
   	methods:{
   		SendMsg(){
   			//GetMsg是在父组件中要自定义事件的方法名
   			this.$emit("GetMeg",123)    //123是要传递的值，
   		}
   	}
   

3. 组件中调用子组件的时候要自定义事件 <Child :value=“title” @GetMsg=“Result”/> , 其中value中的值就可以在子组件中用props来接收，GetMsg 就是上一步在子组件中传递的方法名。

//同样在methods方法中接收传递的值
	methods{
		Result(data){    //注意这里的方法名称不是GetMsg，而是Result，GetMsg只是父组件和子组件之间通信的约定
			console.log(data);     //123
		}
	}

• 兄弟组件之间的传值

  ps:在做大型的项目时，推荐使用vue提供的vuex来管理组件之间的通信

方法1：vue中组件之间不能够像父子组件之间那样直接传值，兄弟组件之间进行传值需要一个中间桥梁，子组件需要先将数据传递给公共组件，然后公共组件再将数据传递给需要的子组件。（等于是所有的子组件都是从公共组件中提取数据）
  1. 创建公共组件Common.vue：

在子组件 Child1 和子组件 Child2 中引入Common组件
组件1中：

//methods中
Handleprice(newprice){     //使用 $emit 来绑定
    changeprice.$emit("NewPrice",123);
}

组件2中：

//在接收的时候使用 $on 来接收传值
changeprice.$on("NewPrice",(data)=>{
    console.log(data);   //123
})

方法2：借助父组件，让两个兄弟组件可以联动，子组件A将值传递给父组件，父组件再将值传递给子组件B

第一步：子组件A传值给父组件

通过$emit将e.target.innerText传递给父组件

<template>
  <div class="initail">
    <ul>
      <li v-for="(item,key,index) of cities" :key="index"
       @click="handleInitail">{{key}}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'Initail',
  props: {
    cities: Object
  },
  methods: {
    handleInitail (e) {
      console.log(e.target.innerText)
      this.$emit('message', e.target.innerText)
    }
  }
}
</script>

第二步：父组件接收子组件A的传值，并将值保存到自己的data中，并取名letter（letter：字母）

第三步：父组件将letter传递给子组件B

子组件B通过props接收该值

 

vuex传值:

上图是我的项目目录结构，主要用到child.vue和helloworld.vue这两个组件，在src文件夹下创建store目录，再创建一个index.js文件。

child.vue组件

helloworld.vue组件

store/index.js

上面就是一个最基本的例子，运行后，打开页面会在显示两个组件中获取到的state值，当在helloworld.vue组件的input输入框中输入内容时，会同时改变两个组件的显示，相当于在helloworld.vue组件中改变信息，child.vue组件中会
接收到信息，并发生改变。
  这只是我的很浅的理解，我会继续深入学习并持续更新文章，希望对大家有所帮助，同时也欢迎指出我的错误和不足。