时间戳

首页 > 解决方案 > vue 功能组件中的“参考”指的是什么？

vue.js - vue 功能组件中的“参考”指的是什么？

问题描述

最近在看vue的文档，在看功能组件的时候，发现有这么一句话：

注意：在 2.3.0 之前的版本中，props如果您希望props在功能组件中接受，则需要该选项。在 2.3.0+ 中，您可以省略 props 选项，并且在组件节点上找到的所有属性都将被隐式提取为 props。

与功能组件一起使用时，引用将是 HTMLElement，因为它们是无状态和无实例的。

您可以在此处查看原始文件。

我对第二句话中的“参考”一词感到非常困惑，这个“参考”是什么意思？

希望有人能帮我弄清楚，谢谢我的朋友:)

标签： vue.jsvuejs2

解决方案

我不是 100% 确定，但我认为它指的是这种情况：

Vue.component('functional', {
  functional: true,
  render(h, ctx) {
    return h('button', ctx.data, ctx.children)
  }
})

Vue.component('full', {
  template: '<button><slot/></button>'
})

new Vue({
  el: '#app',
  mounted() {
    console.log(this.$refs.func instanceof HTMLElement)
    console.log(this.$refs.full instanceof Vue)
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <functional ref="func">Functional</functional>
  <full ref="full">Full</full>
</div>

如果你得到一个函数组件的引用，你可能不会得到一个组件实例，因为函数组件本身没有一个组件实例。

最好将功能组件视为一个功能。它不是一个“真正的”组件。

您返回的 ref 取决于功能组件的实现方式。功能组件的渲染函数负责将ref数据传递给它渲染的子节点之一。在上面的示例中，ctx.data.ref等于'func'并且它被分配给<button>，因此在根组件this.$refs.func中等于该 DOM 元素。如果我没有传递ctx.data给按钮，那么this.$refs.func将永远是undefined.

推荐阅读