一、父组件传值给子组件
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>
