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

简介: 父组件调用子组件中的方法- 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>
}
相关文章
|
7月前
有关子组件修改父组件传值报错问题
有关子组件修改父组件传值报错问题
48 0
|
5月前
|
前端开发
forwardRef的简单使用:用于解决父组件传递ref给子组件的问题
forwardRef的简单使用:用于解决父组件传递ref给子组件的问题
202 2
|
7月前
|
JavaScript
Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
|
5月前
|
JavaScript 搜索推荐
vue【详解】props —— 子组件接收父组件传入的参数
vue【详解】props —— 子组件接收父组件传入的参数
63 0
|
7月前
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
|
7月前
|
人工智能 JavaScript 前端开发
sync修饰符-子组件修改父组件属性
sync修饰符-子组件修改父组件属性
|
7月前
|
JavaScript
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
|
7月前
|
小程序
子组件调用父组件的方法并传递数据
子组件调用父组件的方法并传递数据
|
JavaScript
vue父组件调用子组件方法
vue父组件调用子组件方法
81 0
|
JavaScript
vue子组件调用父组件方法
vue子组件调用父组件方法
100 0