vue开发笔记-refs方法调用那点事

父组件调用用子组件的方法（让儿子干点活）

//Son.vue
<script>
export default {
    methods: {
        do() {}
    }
}
</script>

//Father.vue
import Son from './Son.vue';
<script>
    export default {
        components: {
            Son
        }
    }
</script>
<template>
    <button @click="this.$refs.son.do()">儿子干活</button>
    <Son ref="son"></Son>
</template>

子组件调用父组件的方法(催爸爸干活)

这里面没有ref

//Son.vue
<button @click="this.$parent.do()"></button>

//Father.vue
import Son from './Son.vue';
<script>
export default {
    components: {
            Son
        },
    methods: {
        do() {}
    }
}
</script>
<template>
    <Son></Son>
</template>

现在儿子有了孩子，儿子出差把孩子放在了爸爸家。现在儿子打电话给爸爸通知孩子写作业。

//GrandSon.vue
<script>
export default {
    methods: {
        study() {}
    }
}
</script>

//Father.vue
//因为Father被包含在GrandFather里面，所以Father啥也不需要引入。
<button @click="this.$parent.$refs.grandson.study()"></button>

//GrandFather.vue
import Father from './Father.vue';
import GrandSon from './GrandSon.vue';
<script>
    export default {
        components: {
            Father,
            GrandSon
        }
    }
</script>

<template>
    <Father></Father>
    <GrandSon ref="grandson"></GrandSon>
</template>

问：为什么爸爸不能直接引用儿子以通知儿子写作业呢？
答：因为爷爷也引用着孙子呢。
解释：

在 Vue 中，如果子组件和父组件都使用了相同的 ref 名称，那么会造成冲突。
当一个 ref 被用在子组件上时，this.$refs 将会是一个对象，其中包含了所有具有 ref 的子组件。
如果父组件和子组件都有相同名称的 ref，那么父组件的 ref 会覆盖子组件的 ref，也就是说，this.$refs 只会包含父组件的对应 ref，而不会包含子组件。