vue组件中最最最简单的传值方法

1.子组件调用父组件的方法

①------在父组件的methods中定义fatherMethod方法，然后在子组件中使用this.$parent.fatherMethod()调用即可。如下所示
父组件------father.vue

<template>
	<!-----child是子组件-------->
	<child></child>
</template>


data(){
	return{
		msg:'我是父组件的数据'
	}
},
methods:{
	fatherMethod(){
		console.log(this.msg)
	}
}

子组件-------child.vue

mounted(){
	//我这是为了方便直接在mounted调用，
	//你也可以在created中调用，也可以定义在methods中
	this.$parent.fatherMethod()
}

②------父组件通过自定义事件，将父组件的方法传递给子组件

父组件------father.vue

<template>
	<child @father="fatherMethod"></child>
</template>

子组件-------child.vue

mounted(){
	this.$emit('father')
}

③—=通过props方式，子组件获取父组件的方法

父组件-----father.vue

<template>
	<child :father="fatherMethod"></child>
</template>

子组件-------child.vue

props:{
	father:{
		type:Function,
		default:null
	}
}
//这样就可以通过this.father()调取这个方法

2父组件调用子组件的方法

父组件调用子组件的方法可以查看上一篇文章中父组件调取子组件方法

3组件之间传值

1-----父组件向子组件传值，可以通过props方法绑定属性传值
2-----子组件向父组件传值，可以使用自定义事件传值
3-----所有组件之间的传值（包括父传子，子传父，平行组件传值，隔代传值）。
这里重点介绍第三种传值方式，如果对前两种传值不太懂的朋友们可以看vue入门基础篇
所有组件传值是指不受限制，任何组件都可以使用，其实在之前vue入门基础篇中页介绍过平行组件的传值，但是你发现用在项目中使用就不好使了，因为那只是让你了解原理，现在我来告诉你怎样在项目中使用平行组件传值

首先第一步：需要在静态文件static中新创建一个bus.js文件
在bus.js文件中写上如下内容

import Vue from 'Vue'
export default new Vue

第二步：在你需要进行传值与接收值的两个文件中都要引入新建的bus.js文件

news.vue这是触发传值的组件

import bus from '../../static/js/bus.js'
  export default{
    name:'news',
    data(){
      return{
        msg:'sadsfdsf'
      }
    },
    methods:{},
    mounted() {
    //传值使用$emit(),接收值使用$on()
      bus.$emit('asd',this.msg)
    }
  }

hello.vue接收值的组件

import bus from '../../static/js/bus.js'
export default {
  name: 'Hello',
  data () {
    return {
      newmsg:''
    }
  },
  methods:{},
  created() {
    bus.$on('asd',(val)=>{
      this.newmsg = val
      console.log(this.newmsg)
    })
  }
}

效果如下图所示

最后这几种vue组件之间的传值方式都已经列举完了，只要搞懂了这几种方法，组件之间传值的问题大部分就都能解决了。如果还有更好的方法，欢迎评论下方留言