Vue 3中如何为组件实例设置非响应式的数据?
P粉973899567
P粉973899567 2023-08-25 23:08:24
[Vue.js讨论组]
<p>对于Vue2有一个类似的问题,建议使用<code>$options</code>。</p> <p>但是对于Vue 3似乎不起作用。</p> <p>首先,Vue 3的文档中说,<code>$options</code>是只读的。</p> <p>所以当我尝试在组件挂载时初始化实例中的tooltip时,我得到了非常奇怪的行为,当显示工具提示时,它们是从最后创建的组件中显示的,所以似乎<code>$options</code>在某种程度上是“全局”的?</p> <p>当将<code>tooltip</code>放入<code>data</code>中时,一切正常,但显然tooltip不应该是响应式的,我想将其放在<code>data</code>之外。</p> <pre class="brush:html;toolbar:false;">&lt;template&gt; &lt;i :class=&quot;['bi ', icon, hover &amp;&amp; 'text-primary']&quot; class=&quot;bg-body&quot; @mouseover=&quot;hover = true; $options.tooltip.show();&quot; @mouseleave=&quot;hover = false; $options.tooltip.hide();&quot; @click=&quot;$options.tooltip.hide();&quot; style=&quot;cursor: pointer&quot; :title=&quot;title&quot; ref=&quot;icon&quot; /&gt; &lt;/template&gt; &lt;script&gt; import {Tooltip} from &quot;bootstrap&quot;; export default { props: [&quot;icon&quot;, &quot;title&quot;], tooltip: null, data() { return { hover: false } }, mounted() { this.$options.tooltip = new Tooltip(this.$refs.icon,{ placement: 'bottom', trigger: 'manual', title: this.title || '' }); }, } &lt;/script&gt; </pre></p>
P粉973899567
P粉973899567

全部回复(1)
P粉404539732

您可以直接在mounted()钩子中将非响应式属性附加到组件实例上:

<script>
export default {
  // tooltip: null,
  mounted() {
    // this.$options.tooltip = new Tooltip(...)
    this.tooltip = new Tooltip(...)
  },
}
</script>

<template>
  <!-- BEFORE -->
  <i
      @mouseover="hover = true; $options.tooltip.show();"
      @mouseleave="hover = false; $options.tooltip.hide();"
      @click="$options.tooltip.hide();"
      ref="icon"
  />

  <!-- AFTER -->
  <i
      @mouseover="hover = true; tooltip.show();"
      @mouseleave="hover = false; tooltip.hide();"
      @click="tooltip.hide();"
      ref="icon"
  />
</template>

演示

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号