父组件：
<div>
<div @click="handleVisit"></div>
<child ref="child" :data="data" @close="closeDialog" ></child>
</div>
export default {
name: "partentPage",
methods: {
handleVisit () {
// 在这个方法里调子组件的loadData()方法
this.$nextTick(()=>{ // 为了在子组件加载完掉这个方法，不加这个有可能导致loadData()方法是undefined
this.$refs.child.loadData() // 正常写法
(this.$refs['child'] as any).loadData() // TypeScript的写法
})
}
}
}
子组件：
<template>
<div>
........
<button @click="cancel">取 消</button>
</div>
</template>
export default {
name: "childPage",
props: {
data: {
type: Object,
default: () => {}
}
},
methods: {
cancel () {
// 子组件通过this.$emit()派发事件，父组件利用v-on对事件进行监听，实现参数的传递
this.$emit('close', params) // params是后边的参数不限
},
loadData () {
.......
}
}
}
// 注意：利用props实现传值的过程中理论上是要实现单向传递，即父组件改变相关参数的值，子组件也相应变化，但是子组件对参数的改变不应该影响父组件,但是当props中接收的是父组件传递的引用类型（对象或者是数组）时，在子组件中对数据改变时，父组件中的数据也会相应的改变，因为两者是指向的同一地址内存。如果不想子组件的改变影响父组件可以利用深拷贝，将接受的数据进行深拷贝后在子组件中使用，而不直接操作接受的数据。深拷贝可以直接利用ES6中的obj=Object.assign（{},myMessage）（在computed中定义），这样子组件的改动将不会影响到父组件。