VUE中父组件如何调用子组件的方法

Posted 2022-08-28 rockeybalboa

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站 ​​点击跳转浏览。​​     一般的话，如果要调用子组件中的方法，一般用watch一个父组件传递给子组件的一个值这样来进行观测，一般不会用下面这两种方式不过不得已，也要用

方案一：通过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 、 emit、 emit、on方法；

//父组件中

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    
 
<script>
import Child from ./child;
 
export default 
    methods: 
        handleClick() 
               this.$refs.child.$emit("childmethod")    //子组件$on中的名字
        ,
    ,

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