Vue引入components(组件)以及父子组件方法调用和参数传递

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)
    },
  }
}