Vue引入components(组件)以及父子组件方法调用和参数传递
Vue引入components以及父子组件方法调用和参数传递父组件parent.vue引入 组件 child.vue// 父组件引入子组件<template><div><dataSource @getLink="getMyLink" :objData="data"ref="dataSource"></dataSource><el-button
·
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(){
// 父组件调用子组件handleSubmit()方法, dataSource 为子组件ref的值
const aa=this.$refs.dataSource.handleSubmit();
}
},
};
</script>
子组件 child.vue
//子组件 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){
//通过 getLink 调用父组件方法 item 为数组
this.$emit('getLink', item);
//使用父组件传递过来的属性参数
console.log('objData',this.objData)
},
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)