时间戳

首页 > 解决方案 > 如何访问嵌套的 vue.js 组件的值？

vue.js - 如何访问嵌套的 vue.js 组件的值？

问题描述

我有一个名为的组件lbcontainer和一个名为lbitem.

现在我想将任意数量的lbitem组件嵌套到一个lbcontainer组件中。

该lbcontainer组件有一个方法可以访问lbitem我嵌套在组件中的所有lbcontainer组件。

问题是：ref我可以通过 访问该项目this.$ref.lbitem，但这仅适用于组件声明，但不适用于稍后在 HTML 中使用该组件时。

Vue.component('lbcontainer', {
    methods: {
    "showChildren": function() {
        console.log(this.$refs);
    }
  },
  template: `
    <div>
        <slot></slot>
      <a @click='showChildren'>Show children</a>
    </div>
  `
});

Vue.component('lbitem', {
    data: function() {
    return {
        value: ""
    }
  },
  template: `
    <input v-model="value"></span>
  `
});

new Vue({
  el: "#app",
  data: {

  },
  methods: {

  }
});



<div id="app">
  <lbcontainer>
    <lbitem ref="item"></lbitem>
    <lbitem ref="item"></lbitem>
  </lbcontainer>
</div>

当我按下按钮时，console.log显示一个空对象。如何访问嵌套的孩子？

这是jsfiddle

标签： vue.jsvuejs2nestedvue-component

解决方案

避免在 vue 中使用 $ref ...（在第一次渲染后填充 $ref ...）

孩子只能通过事件与他们的父母沟通......或者父母拥有所有数据并通过道具发送给他们的孩子。

如果父母和孩子必须编辑数据，您可以使用 v-model 或 .sync；

https://codesandbox.io/s/p95x1mxykm

推荐阅读