vue父子组件传值,父子组件方法互相调用
官方:vue父子组件传值,父组件向子组件传递数据时，通过props进行传递;子组件向父组件传递数据时，通过$emit方法进行传递
实例中:父组件引入子组件时名字采用 - 分割命名，例如子组件全名为uploadDialogXxx.vue,父组件中引入的子组件就需要写成,
父组件中components中加入
components: {
UploadDialogXxx
父组件import对应路径子组件
import uploadDialogXxx from '@/uploadDialogXxx'
父组件向子组件传值
父组件需要传给子组件的参数,对象等可直接写在引入的组件中,例如传参数id
:id="id">
父组件的data()中return定义一个id:null即可
子组件接收该参数id时,需要在子组件中的props定义该id,形如
props:{
id:null
},
(ps:props定义参数的写法有更详细的,可参照文档)
子组件中使用该id时方法里可直接定义this.id使用
父组件调用子组件中方法
父组件中中命名一个ref,形如
ref="dialog">
父组件调用时方法里面可直接写this.$refs["dialog"].子组件方法名()
子组件向父组件传值
子组件中方法里加入this.$emit('命名',传递的值)
父组件中加入子组件命名的方法,形如
@命名="父组件方法">,然后父组件方法中即可食用
父组件方法(传递的值){
console.log('传递的值')
}
子组件调用父组件方法
子组件方法中加入this.$parent.父组件方法名()即可食用