个人中心
gpt4 book ai didi

javascript - VueJS 组件 ref 在所有阶段都是未定义的

转载 作者：行者123 更新时间：2023-12-01 01:25:47 26 4
gpt4 key购买 nike

我正在学习 VueJS，将其与 Rails 应用程序一起使用，但在尝试从父组件访问组件时遇到问题。我可能做错了，但我不知道问题出在哪里。

我试图将我的问题归结为一个简单的 html 示例:

<html>
  <head>
    <meta charset='utf-8' />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <outer>
        <div>
          <form>
            <inner ref="testref"><input/></inner>
          </form>
        </div>
      </outer>
    </div>
    <script>
      let inner = Vue.component('inner', {
        template: `
          <div>
            <span hidden="true"><slot></slot></span>
            <input v-model="searchText" />
          </div>
        `,
        props: ['placeholder'],
        data: function() {
          return {
            searchText: this.placeholder
          }
        }
      })
      let outer = Vue.component('outer', {
        template: `
          <div>
            <h3 v-on:click="testos">Hello: {{ client_id }}</h3>
            <slot></slot>
          </div>
        `,
        data: function() {
          console.log('data', this.$refs.testref)
          return {
            client_id: ''
          }
        },
        mounted: function() {
          console.log('mounted', this.$refs.testref)
        },
        methods: {
          testos: function() {
            console.log('method', this.$refs.testref)
          }
        }
      })
      new Vue({
        el: '#app',
        components: {
          'inner': inner,
          'outer': outer
        }
      })
    </script>
  </body>
</html>

我收到以下控制台日志:

data undefined
mounted undefined
method undefined

我尝试遵循 https://v2.vuejs.org/v2/api/#ref 中的语法，但我也尝试过使用 :ref 而不是 ref，但效果并没有更好。

我知道存在“引用注册计时”的复杂性，即使我不完全理解它。但是点击 H3 的时机不应该是好的吗？我希望它甚至可以通过 mounted 来解决，就像 https://stackoverflow.com/a/40884455/2730032 中那样。 .

额外问题:我的问题实际上是关于 ref 的工作原理。然而，我确实有一个更普遍的问题，如果不使用 ref 的建议可能会受益。

我有一个令我满意的 inner 组件，它将 client_id 的输入字段与搜索字段包装在一起，该搜索字段从 API 中提供一些类似选择的选项，并将输入字段 client_id 设置为选定的选项。我想在 outer 组件中重用该 inner 组件，该组件将使用 client_id(每当它被 inner 更改时)来调用API 并填充 outer 组件中的一堆其他表单字段(这些字段通过槽从 inner 到 outer 给出)。如果这有任何意义的话。

我认为最好的方法是将 client_id 作为 inner 的数据字段，并让 outer 通过 ref 访问它。所以在这里我试图让 ref 工作。

编辑1:有一个复制错误，对此深表歉意。 test1 标签来自以前的版本。但无论如何我都会遇到这个问题。

EDIT2:我接受了 Roy J 的第二个答案，因为我觉得它最好地回答了问题，尽管它不是一个好的设计，但对于某些人来说可能是一个有效的解决方案。然而，在我的实际实现中，我使用了 Roy J 第一个答案，任何阅读这个问题的人可能也应该这样做(我还设法将 inner 添加到 outer 的模板中，以避免使用应用程序)。

最佳答案

由于您无法使用 ref 的唯一原因是它是在父级中定义的，因此您可以转到 $parent 并使用其refs。请注意，这使得 outer 依赖于(纠缠)inner 的结构以及是否存在 ref 来获取它。这是糟糕的设计，但它是对代码进行的最小更改，您必须让它完成您想要做的事情。

const inner = Vue.component('inner', {
  template: `
          <div>
            <span hidden="true"><slot></slot></span>
            <input v-model="searchText" />
          </div>
        `,
  props: ['placeholder'],
  data: function() {
    return {
      searchText: this.placeholder
    }
  }
});
const outer = Vue.component('outer', {
  template: `
          <div>
            <h3 v-on:click="testos">Hello: {{ client_id }}</h3>
            <slot></slot>
          </div>
        `,
  data: function() {
    return {
      client_id: ''
    }
  },
  methods: {
    testos: function() {
      this.client_id = this.$parent.$refs.testref.searchText;    
      console.log('method', this.client_id);
    }
  }

})
new Vue({
  el: '#app',
  components: {
    'inner': inner,
    'outer': outer
  }
})
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <outer>
    <div>
      <form>
        <inner ref="testref"></inner>
      </form>
    </div>
  </outer>
</div>

关于javascript - VueJS 组件 ref 在所有阶段都是未定义的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53820217/

26 4 0
文章推荐： jQuery/Visualforce 选项卡未加载
文章推荐： django - 过滤已评估的 QuerySet
文章推荐： jquery - Fancybox 2.1.0 从图库中排除触发图像
文章推荐： emacs - Emacs 中的按键事件，或轮询键盘状态？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com