vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,
然后通过this.$refs.ref.method调用,例如:
父组件:
<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>
子组件:
<template> ? <div>{{name}}</div> </template> <script> ? export default { ? ? data() { ? ? ? return { ? ? ? ? name: '测试' ? ? ? }; ? ? }, ? ? methods: { ? ? ? childMethods() { ? ? ? ? console.log(this.name); ? ? ? } ? ? } ? }; </script>
在父组件中, this.$refs.child 返回的是一个vue实例,可以直接调用这个实例的方法 ?
|