vue子组件向父组件传值 复杂案例

好的，下面我来给你讲解一个复杂一些的案例。

假设我们有一个父组件 `Parent.vue`，里面包含一个子组件 `Child.vue`。`Parent.vue` 有一个数据 `parentData`，初始值为 `100`，同时 `Child.vue` 有一个数据 `childData`，初始值为 `0`。我们需要实现的是，当 `Child.vue` 中的 `childData` 数据发生变化时，将其传递给 `Parent.vue` 并更新 `parentData`，同时当 `Parent.vue` 中的 `parentData` 数据发生变化时，将其传递给 `Child.vue` 并更新 `childData`。

首先，在 `Parent.vue` 中定义一个方法 `updateData`，用来接收 `Child.vue` 传递过来的数据，并更新 `parentData`：

<template>
  <div>
    <h1>Parent Component: {{ parentData }}</h1>
    <Child :childData="childData" :update-parent-data="updateData" />
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      parentData: 100,
      childData: 0
    }
  },
  methods: {
    updateData(data) {
      this.parentData = data
    }
  }
}
</script>

接着，在 `Child.vue` 中定义一个方法 `updateParentData`，用来将 `childData` 传递给 `Parent.vue`：

<template>
  <div>
    <h2>Child Component: {{ childData }}</h2>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  props: {
    childData: Number,
    updateParentData: Function
  },
  methods: {
    increment() {
      this.childData += 1
      this.updateParentData(this.childData)
    }
  }
}
</script>

这里需要注意的是，我们在 `Child.vue` 中使用了 `this.updateParentData(this.childData)` 将 `childData` 传递给 `Parent.vue`，并且需要将 `update-parent-data` 作为 prop 传递给 `Child.vue`。

最后，在 `Parent.vue` 的模板中，我们需要监听 `parentData` 的变化，并将变化传递给 `Child.vue`：

<template>
  <div>
    <h1>Parent Component: {{ parentData }}</h1>
    <Child :childData="childData" :update-parent-data="updateData" />
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      parentData: 100,
      childData: 0
    }
  },
  methods: {
    updateData(data) {
      this.parentData = data
    }
  },
  watch: {
    parentData(newVal) {
      this.childData = newVal
    }
  }
}
</script>

这里我们使用了 `watch` 来监听 `parentData` 的变化，并将变化传递给 `Child.vue` 中的 `childData`。这样一来，当 `Child.vue` 中的 `childData` 发生变化时，会触发 `updateParentData` 方法将变化传递给 `Parent.vue` 中的 `parentData`，然后又会触发 `watch` 将变化传递给 `Child.vue` 中的 `childData`，从而实现了子组件向父组件和父组件向子组件的数据传递。