Vue父组件与子组件的交互

一、父组件传值给子组件

1.1 父组件代码

 <template>
  <div class="app-container">
    <fixed-thead :tableHead="headList" :tableData="listData" />
  </div>
</template>
<script>
import {example1, example2, tabeldatas} from './columns';
import fixedThead from '@/views/components/Table'

export default {
  name: 'testTable',
  components: { fixedThead},
  data() {
    return {
        headList:example2,
        listData:tabeldatas,
    }
  }
}
</script>

1.2子组件代码

<template>
  <div class="app-container">
    <el-table :data="tableData" style="width: 100%" border fit highlight-current-row>
      <el-table-column v-for="(item,index) in tableHead":label="item.label" :key="index" :property="item.property" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      openDialog(data){
        this.open=data
        this.$emit("opentables",this.open)
      }
    },
   props:{
      tableData: {
          type: Array,
          require: true
      },
      tableHead:{
          type: Array,
          require: true
      }
    }
  }
</script>

二、子组件传值到父组件

2.1 子组件代码

<template>
  <div class="app-container">
    <el-button  type="primary" size="mini" @click="editTable">编辑</el-button>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        open:true
      }
    },
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      editTable(){
        this.$emit("openEdittable",this.open)
      }
    }
  }
</script>

2.2 父组件代码

<template>
  <div class="app-container">  
    <button-box @openEdittable="openDialog"/> 
  </div>
</template>
<script>
  import buttonBox from '@/views/components/Button'
  export default {
    components:{
      buttonBox
    },
    data(){
      return {
        open:''
      }
    },
    methods: {
      openDialog(data){
        this.open=data
      }
    },
  }
</script>

三、子组件调用父组件的方法

• 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

3.1.1 父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

3.1.2 子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

• 第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了

3.2.1 父组件

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

3.2.2 子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>

• 第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

3.3.1 父组件

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

3.3.2 子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

四、父组件调用子组件的方法

• vue中如果父组件想调用子组件的方法，可以在子组件中加上ref，然后通过this.$refs.ref.method调用，例如：

4.1 父组件

<template>
  <div @click="fatherMethod">
    <child ref="child"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child.vue';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {this.$refs.child.childMethods();
      }
    }
  };
</script>

4.2 子组件

<template>
  <div>{{name}}</div>
</template>
<script>
  export default {
    data() {
      return {
        name: '测试'
      };
    },
    methods: {
      childMethods() {
        console.log(this.name);
      }
    }
  };
</script>