VueJS 访问嵌套组件数据值

Posted 2023-02-23

【中文标题】VueJS 访问嵌套组件数据值

【英文标题】：VueJS access nested component data value

【发布时间】：2019-03-27 01:55:06

【问题描述】：

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

// 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[] 值。

【问题讨论】：

我认为Vuex适合这种情况

我正在使用 Vuex，但要存储我的 API 值和状态，但在这种情况下，我只想要从子组件到父组件的对象

【参考方案1】：

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

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

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

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

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

在父js部分

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

就是这样。

【讨论】：

我正在使用联系人输入并将它们存储在一个对象中，那么我如何使用事件传递这个对象？

您可以将监视和值更改触发事件与数据一起使用。观看：contact_inputs：函数（val）this.$emit（'testEvent'，val）； ,