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
        }
      }
    }

我正在尝试做的事情：

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

>

我尝试过的事情：

我尝试使用以下方法在 AddressComponent 中致电getAddresses： this.$refs.childAddress.getAddresses();

这正常工作，但是我无法访问 ContactComponent contact_input[]值。

Answer 1

$ refs属性是允许您操作DOM的功能，例如更改div颜色，这样您就走错了路。

如果要将数据从父级传递到组件，则应使用道具。如果您想从子级到父级接收数据，则必须使用事件。

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

结束，然后在父模板中可以捕获它

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

以及父级js部分

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

仅此而已。

VueJS访问嵌套的组件数据值

1 个答案: