vue父子组件传值,父子组件方法互相调用

vue父子组件传值,父子组件方法互相调用

官方:vue父子组件传值,父组件向子组件传递数据时，通过props进行传递;子组件向父组件传递数据时，通过$emit方法进行传递

实例中:父组件引入子组件时名字采用 - 分割命名，例如子组件全名为uploadDialogXxx.vue,父组件中引入的子组件就需要写成<upload-dialog-xxx></upload-dialog-xxx>,

父组件中components中加入

components: {

　　UploadDialogXxx

}

父组件import对应路径子组件

import uploadDialogXxx from '@/uploadDialogXxx'

 

父组件向子组件传值

父组件需要传给子组件的参数,对象等可直接写在引入的组件中,例如传参数id

<upload-dialog-xxx  :id="id"></upload-dialog-xxx>

父组件的data()中return定义一个id:null即可

子组件接收该参数id时,需要在子组件中的props定义该id,形如

props:{

　　id:null

},

(ps:props定义参数的写法有更详细的,可参照文档)

子组件中使用该id时方法里可直接定义this.id使用

 

父组件调用子组件中方法

父组件中<upload-dialog-xxx></upload-dialog-xxx>中命名一个ref,形如

<upload-dialog-xxx  ref="dialog"></upload-dialog-xxx>

父组件调用时方法里面可直接写this.$refs["dialog"].子组件方法名()

 

子组件向父组件传值

子组件中方法里加入this.$emit('命名',传递的值)

父组件中<upload-dialog-xxx></upload-dialog-xxx>加入子组件命名的方法,形如

<upload-dialog-xxx  @命名="父组件方法"></upload-dialog-xxx>,然后父组件方法中即可食用

父组件方法(传递的值){

　　console.log('传递的值')

}

 

子组件调用父组件方法

子组件方法中加入this.$parent.父组件方法名()即可食用