Skip to content

[vue] 怎么访问到子组件的实例或者子元素? #451

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] 怎么访问到子组件的实例或者子元素?

Activity

maomao1996

maomao1996 commented on Jun 28, 2019

@maomao1996

通过

this.$refs
Panamer

Panamer commented on Jul 25, 2019

@Panamer

vm.$children

xiaoliuer

xiaoliuer commented on Aug 5, 2019

@xiaoliuer

this.$children/this.$refs.xxx

yangyangjizi

yangyangjizi commented on Dec 27, 2019

@yangyangjizi

在子组件标签上加 ref属性如ref="baseAlert",在父组件通过this.$refs.baseAlert.子组件方法名。

pluscai

pluscai commented on Jul 1, 2020

@pluscai

写了完整的demo,你可看下

<div id="app">
    <base-input ref="usernameInput"></base-input>
</div>

<script>
    Vue.component("base-input", {
        template: "<input type='input' ref='input'>",
        methods: {
            popUp() {
                alert(11)
            },
            focus: function () {
                this.$refs.input.focus()
            }
        }
    });

    new Vue({
        el: "#app",
        data: {},
        mounted: function () {
            this.$refs.usernameInput.popUp();
            this.$refs.usernameInput.focus();
        }
    });
</script>

完整demo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@pluscai@xiaoliuer@maomao1996@Panamer

        Issue actions

          [vue] 怎么访问到子组件的实例或者子元素? · Issue #451 · haizlin/fe-interview