父组件代码
<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到子页面查看详情列表
