Question

我正在尝试在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>

我猜测必须有更好的方法来实现这一目标？似乎应该是一个简单的任务？谢谢。

Answer 1

在当前组件的模板中确实有更好的ways to refer to specific elements：在模板中使用ref，这将允许您的组件脚本通过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实例均不受影响。

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

1 个答案: