Vue引入components以及父子组件方法调用和参数传递
父组件parent.vue引入 组件 child.vue
<template>
<div>
<dataSource @getLink="getMyLink" :objData="data" ref="dataSource"></dataSource>
<el-button @click="getDataSource">获取</el-button>
</div>
</template>
<script>
import dataSource from '../components/data-source'
export default {
name: "parent",
components: { dataSource},
data() {
return {
data:{name:'222'},
};
},
methods: {
getMyLink(item){
console.log('父子组件方法',item)
},
getDataSource(){
const aa=this.$refs.dataSource.handleSubmit();
}
},
};
</script>
子组件 child.vue
<template>
<div>
<avue-form
:option="option"
ref="form"
v-model="form"
@submit="handleSubmit"
>
<template slot-scope="scope" slot="path">
<el-cascader :props="props" v-model="form.path"></el-cascader>
</template>
</avue-form>
</div>
</template>
<script>
export default {
name: "dataSource",
props: {
objData:{
type:Object
}
},
data() {
},
methods: {
getPre(item){
this.$emit('getLink', item);
console.log('objData',this.objData)
},
}
}