父组件代码
<template>
<div>
<button @click="showDialoag('hello')">点击</button>
<Contacts ref="contacts" />
</div>
</template>
<script>
import Contacts from "./contacts";
export default {
name: 'Farther',
data() {
return {
}
},
methods: {
showDialoag(text) {
//直接调用子组件的方法给数据赋值
this.$refs.contacts.show(text);
}
},
components: {
Contacts
}
}
</script>
子组件代码
<template>
<div>
<el-dialog :visible.sync="visible">
<span v-text="text"></span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'Contacts',
data() {
return {
text: undefined,
visible:false
}
},
methods: {
show(text) {
this.visible = true;
this.text = text;
}
}
}
</script>
效果如下:
适用场景:
点击某条数据查看详情时传id到子页面查看详情列表