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

最新推荐文章于 2024-08-21 18:23:58 发布

凌晨两点半`

最新推荐文章于 2024-08-21 18:23:58 发布

阅读量940

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_43201542/article/details/107392103

版权

VUE 专栏收录该内容

34 篇文章 7 订阅

订阅专栏

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

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

//父组件中

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

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

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


//子组件中

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

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

//父组件中

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

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

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

//子组件中

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

zhuanzai https://www.cnblogs.com/yuzhongyu/p/10825824.html