如何引用组件中的子元素？答案

【问题标题】：How to reference child elements in a component?如何引用组件中的子元素？
【发布时间】：2019-07-17 02:15:47
【问题描述】：

我正在尝试在 Vue 中构建一个父子树，我想将父级的 DOM/元素 ID 传递给子级，以便他们可以附加到它。下面是一个简单的例子，说明我试图在浏览器中实现 DOM 结构：

<div id="my-id">
    <p>parent-comp header</p>
    <div id="my-id-child">
        <p id="my-id-child-content">child-comp content</p>
    </div>
    <p>parent-comp footer</p>
</div>

到目前为止，我能够做到这一点的唯一方法是将id 复制到另一个属性propid 并将它们都传递到树中。这看起来很乱。查看我的示例代码：

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<parent-comp id="my-id" propid="my-id"></parent-comp>

<script type="application/javascript">
    Vue.component('parent-comp', {
        props: {
            propid: String
        },
        template: ` <div>
                        <p>parent-comp header</p><child-comp :id="propid + '-child'" :propid="propid + '-child'"></child-comp><p>parent-comp footer</p>
                    </div>`,
    });

    Vue.component('child-comp', {
        props: {
            propid: String
        },
        template: `<div>
                    <p :id="propid + '-content'">child-comp content</p>
                   </div>`,
    });

    new Vue({
        el: '#my-id'
    });
</script>
</body>
</html>

我猜一定有更好的方法来实现这一点？看起来这应该是一个简单的任务？谢谢。

【问题讨论】：

不要搞砸 DOM。建模你想要的，然后让 Vue 渲染它。
我无法确定您要做什么，但看起来您可能需要 slots。
是的，我对插槽很熟悉，但它们并不能解决我的问题。想象一个页面，上面有一百个相同的组件实例。每个组件都有一个值和一些按钮来操作它。组件中的那些按钮需要显示、隐藏、激活或非活动等特定组件，仅取决于其当前编辑状态，而不影响页面上任何其他组件中的任何按钮。所以我想使用它的 ID 来定位每个按钮。
您需要停止考虑操作 DOM，而是为您想要的模型建模。页面上的每个项目都应该在您的视图模型中具有相应的数据结构，并且可以使用该数据结构独立操作。
如果你能清楚地描述你想要得到的行为的一个简单例子，我相信我们可以告诉你如何得到它。你试图规定如何去做，但我们不知道你想做什么。

标签： vue.js vuejs2 vue-component

【解决方案1】：

在当前组件的模板中确实有更好的ways to refer to specific elements：在模板中使用refs，这将允许您的组件脚本通过this.$refs访问它们：

<template>
  <div>
    <button ref="myBtn">Click</button>
  </div>
</template>

<script>
export default {
  methods: {
    doFoo() {
      console.log(this.$refs.myBtn)
    }
  }
}
</script>

保持范围隔离。例如，当页面上有组件A 的多个实例时，其中一个获得对其按钮的引用（通过this.$refs.myBtn）以禁用它，只有该实例的按钮被禁用。所有其他 A 实例不受影响。

【讨论】：

这就是我要找的。谢谢！
@CatFingers 没问题 :)