子组件输出后，如何将父模板元素传递至父组件？

我来帮你搞定这个问题！你遇到的核心点是：模板里的#textArea引用不能直接在事件绑定里当作参数传递，因为模板引用的作用域是父组件实例，得通过Vue的$refs来获取。下面给你两种靠谱的解决思路：

方法1：父组件直接通过$refs获取元素引用（推荐） #

这种方法最简洁，不用在子组件里额外处理。你只需要给父模板里的元素加上ref属性，然后在父组件的方法里直接访问它：

<!-- 父组件模板 -->
<template>
  <div>
    <!-- 用ref代替#变量名，给元素起个标识 -->
    <textarea ref="textArea"></textarea>
    <!-- 子组件触发edit事件，只传$event即可 -->
    <ChildComponent @edit="editReview"></ChildComponent>
  </div>
</template>

<script>
export default {
  methods: {
    editReview(event) {
      // 直接通过this.$refs.textArea拿到元素引用
      const textAreaElement = this.$refs.textArea;
      // 现在你可以随意操作这个元素了，比如获取值、修改样式等
      console.log('文本框内容:', textAreaElement.value);
      textAreaElement.focus();
    }
  }
}
</script>

方法2：将元素引用通过props传给子组件，再由子组件回传 #

如果你确实需要在子组件触发事件时把元素引用一起传递，那可以先把父组件的$refs传给子组件作为props，然后子组件触发emit时带上这个引用：

父组件代码 #

<template>
  <div>
    <textarea ref="textArea"></textarea>
    <!-- 把父组件的refs传给子组件 -->
    <ChildComponent :textAreaRef="$refs.textArea" @edit="editReview"></ChildComponent>
  </div>
</template>

子组件代码 #

<template>
  <button @click="handleEdit">触发编辑</button>
</template>

<script>
export default {
  // 接收父组件传来的元素引用
  props: ['textAreaRef'],
  methods: {
    handleEdit(event) {
      // 触发父组件事件时，同时传递event和元素引用
      this.$emit('edit', event, this.textAreaRef);
    }
  }
}
</script>

父组件的方法接收参数 #

editReview(event, textArea) {
  // 这里的textArea就是父模板里的textarea元素啦
  console.log('拿到元素:', textArea);
}

⚠️ 注意：$refs是在组件挂载完成后才会生成的，所以如果子组件在父组件还没挂载好就触发事件，可能会拿到undefined。这种情况下可以在父组件的mounted钩子后再渲染子组件，或者在子组件里用$nextTick确保元素已挂载。

内容的提问来源于stack exchange，提问作者tilly