vue父组件中调用子组件中的方法及vue父组件调用孙子组件的方法

一：通过ref直接调用子组件的方法；子组件child.vue：<template><div>我是子组件</div></template><script>export default {methods: {childFun() {console.log('我是子组件的方法');},},};</script>父组件：<tem

newbie (⊙o⊙)

6162人浏览 · 2021-06-02 18:51:06

newbie (⊙o⊙) · 2021-06-02 18:51:06 发布

一：通过ref直接调用子组件的方法；

子组件child.vue：

<template>
  <div>我是子组件</div>
</template>
<script>
export default {
  methods: {
    childFun() {
      console.log('我是子组件的方法');
    },
  },
};
</script>

父组件：

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
        handleClick() {
              this.$refs.child.childFun();
        },
    },
}
</script>

二：通过组件的 $e m i t 、$ on方法；

子组件child.vue：

<template>
    <div>我是子组件</div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(function() {
            this.$on('childFun', function() {
                console.log('我是子组件方法');
            });
        });
     },
};
</script>

父组件：


<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
        handleClick() {
               this.$refs.child.$emit("childFun")    //子组件$on中的名字
        },
    },
}
</script>

vue调用孙子组件的方法：

父组件

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
	components: {
    	Child 
  	},
    methods: {
        handleClick() {
               this.$refs.child.$refs.grandson.test() 
        },
    },
}
</script>

子组件

<template>
  <div>我是子组件</div>
  <grandson ref='grandson'></grandson>
</template>
<script>
import grandson from './grandson';
export default {
	components: {
    	grandson 
  	},
  methods: {
    childFun() {
      console.log('我是子组件的方法');
    },
  },
};
</script>

孙子组件

<template>
  <div></div>
</template>

<script>
export default {
  name: "index",
  methods:{
    test(){
      console.log('孙子组件的方法')
    }
  }

}
</script>