父组件:
<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中定义),这样子组件的改动将不会影响到父组件。