vue组件之间值的传递

1.父子组件之间的传值
1）父向子传递：
父组件通过v-bind绑定一个变量，子组件通过prop接收这个变量

父组件

<template>
  <div>
    <m-child :message="'Parent message'" ></m-child>
  </div>
</template>

<script>
// 引入子组件
import MChild from '@/components/Child'
export default {
  data () {
    return {
      message: ''
    }
  },
  components: {
    MChild,
  },

子组件

<template>
  <div>
    <h1>{{message}}</h1>
  </div>
</template>

<script>
export default {
  // 要接受父组件传递的参数
  props: {
    message: {
      type: String,
      default: ''
    },
  },

2）子向父传递：
子组件在函数内发起$emit，传递函数名以及参数，父组件在子组件的身上设置v-on传递过来的函数名，并调用自己的函数

子组件

<template>
  <div>
    <button @click="takeMsg"></button>
  </div>
</template>
export default {
	methods: {
	    takeMsg() {
	      this.$emit("takeMsg", "这是子组件传递的值");
	    }
	},
}

父组件

<template>
  <div>
  	<h1>{{message}}</h1>
    <m-child @takeMsg='takeMsg'></m-child>
  </div>
</template>
import MChild from '@/components/Child'
export default {
	components: {
	    MChild,
	},
	data(){
		return {
	       message: ''
	    }
	},
	methods: {
	    takeMsg(value) {
	      this.message=value;
	    }
	},
	
}

2.非父子组件之间的传递
1）Vuex
2）建立一个公共的js文件，专门用来传递消息

message.js

import Vue from 'vue'
export default new Vue

在需要传递消息的地⽅引⼊这个文件，并通过message .$emit传递

import message from './util/message'
methods: {
  passMsg () {
    message.$emit('message', 'i am a message')
  }
},

在需要接收消息的地方使用message .$on接收消息

mounted () {
    message.$on('message', (value) => {
      this.childMessage = value
});