首先是在父组件中引入子组件并挂载组件
import child from './child';
components: {
child
}
//在父组件中使用
<child />
父组件调用子组件的函数方法
<child ref="child" />
//在父组件中调用子组件方法,直接获取子组件元素调用
this.$refs['child'].childFunc()
子组件调用父组件的函数方法
<child ref="child" @parentFunc='parentFunc' />
//把父组件方法绑定在子组件上以后,在子组件中使用this.$emit调用
this.$emit('parentFunc')
父组件传递数据给子组件
<child ref="child" :parentData='parentData' />
//将父组件数据绑定在子组件后,在子组件中接收数据
props: {
parentData: {
type: Object,//数据类型
required: true//是否必须
}
}
子组件传递数据给父组件
<child ref="child" @parentFunc='parentFunc' />
//在子组件中调用父组件的函数方法,并把数据以函数参数的性质传递给父组件
this.$emit('parentFunc',childData)