VueJS 访问嵌套组件数据值

Question

父组件包含一个地址组件：

// ParentComponent.vue
<Address ref="childAddress"></Address>

地址组件包含许多联系人组件：

// AddressComponent.vue
<template>
  <div>
    <Contact ref="childContact"></Contact>
    <Contact ref="childContact"></Contact>
    <Contact ref="childContact"></Contact>
  </div>
</template>
export default {
  components: { Contact },
  data: () => ({
    address_inputs: [],
  }),
  methods: {
    getAddresses() {
      // RETURN address_inputs
    }
  }
}

接触组件容器：

// ContactComponent.vue
    <template>
      <div>
        contact component
      </div>
    </template>
    export default {
      components: { Contact },
      data: () => ({
        contact_inputs: [],
      }),
      methods: {
        getContacts() {
          // RETURN contact_inputs
        }
      }
    }

我想做什么：

我正在尝试从 AddressComponent 中获取 address_inputs[]，并从 ParentComponent 中的 ContactComponent 中获取 contact_inputs[]。

我尝试过的：

我尝试在 AddressComponent 中调用getAddresses，使用： this.$refs.childAddress.getAddresses();

这很好用，但我无法访问 ContactComponent contact_input[] 值。

Answer 1

$refs 属性是允许您操作 DOM 的功能，例如更改 div 颜色，所以您会走错路。

如果你想将数据从父组件传递到组件，你应该使用 props。如果你想从孩子接收数据到父母，你必须使用事件。

在您的示例中，您尝试将数据从子组件传递给父组件，因此在子组件中编写会发出事件的输入更改方法，例如： this.$emit('testEvent', dataFromInput);

然后在你的父模板中结束，你可以抓住它

<Contact ref="childContact" @testEvent="printData"></Contact>

在父js部分

methods: {
  printData(dataFromInput) {
    console.log(dataFromInput);
  }
}

就是这样。