如何将数据从子组件传递到父组件？

Question

我似乎无法理解这个 emit 的东西，希望今天我能弄清楚。当我在 RuleTable.vue 组件内时，我有一系列规则 this.rules。当我点击 Save 时，我需要将规则数组提交到后端，但我无权访问它。如何将我的 this.rules 从我的 RuleTable.vue 组件传递到我的 create.vue 父组件？

不确定这是否有帮助，但我的 this.rules 看起来像这样

[
  {
    "name": " one",
    "priority": 1,
    "url": "https://www.one.com",
    "details": [
      {
        "attribute_id": 1,
        "operator_id": 3,
        "value": "111"
      }
    ]
  }
]

Answer 1

在子组件中 :

this.$emit('saveData', this.rules)

在父组件中:

在脚本中：

created() {
  this.$on('saveData', data => {
    console.log(data);
  });
}

--- 或 ---

在模板中（在子组件元素中）：

v-on:saveData="doSomething"

更新： 根据您的组件结构，您正在尝试从 save 上的父组件访问子组件属性 this.rules .如果是，您可以按照以下步骤 :

在你的子组件中使用ref

<parentComponent>
   <child-component ref="childComponentRef" />
<parentComponent>

然后在保存时从父组件中的子组件访问变量或方法。
```
this.$refs.childComponentRef.rules;
```

如何将数据从子组件传递到父组件？

How to pass data from the child component to the parent component?

vue.js

vue-component

vuejs2

vuetify.js