父组件调用子组件中的方法- this.$refs.xxx.子组件方法();

Posted iwishicould

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了父组件调用子组件中的方法- this.$refs.xxx.子组件方法();相关的知识,希望对你有一定的参考价值。

子组件中有一个说的方法 在父组件中去调用
当你点击的时候 去调用子组件中的方法

fu.vue
在父组件的方法中调用子组件的方法,
很重要 this.$refs.mychild.parentHandleclick();


    <template>
    <div>
        <button @click="clickParent">点击 调用子组件</button>
        <child ref="mychild"></child>
    </div>
    </template>
    
    <script>
    import Child from "../zi/zi";
    export default 
    components: 
        child: Child  //key:value key是组件名称  value是被引入时的名称
    ,
    methods: 
        clickParent() 
        this.$refs.mychild.parentHandleclick();
        
    
    ;
    </script>
 

zi.vue


    <template>
      <div ref="col">child</div>
    </template>
    
    <script>
        export default 
            methods: 
                parentHandleclick(e) 
                console.log("我是子组件在说")
                
            
        ;
    </script>

 

以上是关于父组件调用子组件中的方法- this.$refs.xxx.子组件方法();的主要内容,如果未能解决你的问题,请参考以下文章

如何在父组件调用子组件的方法

vue中父组件调用子组件函数

vue中父组件调用子组件函数

父组件中调用子组件的方法和属性

vue 父组件调用子组件方法ref

react 父组件 调用 子组件的方法