VUE中如何将父组件的值传到孙组件

在Vue中，可以通过props和$emit来实现父组件向孙组件传值。

1. 使用props

在父组件中定义一个属性，并将其传递给子组件。在子组件中，可以通过props来接收这个属性。

父组件：

<template>
  <div>
    <child :parentValue="parentValue"></child>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentValue: 'Hello World'
    }
  }
}
</script>

子组件：

<template>
  <div>
    {{ parentValue }}
    <grandchild :parentValue="parentValue"></grandchild>
  </div>
</template>

<script>
export default {
  props: {
    parentValue: String
  }
}
</script>

孙组件：

<template>
  <div>
    {{ parentValue }}
  </div>
</template>

<script>
export default {
  props: {
    parentValue: String
  }
}
</script>

2. 使用$emit

在父组件中定义一个方法，并将其传递给子组件。在子组件中，可以通过$emit来触发这个方法，并将需要传递的值作为参数传递。

父组件：

<template>
  <div>
    <child @change-value="handleChangeValue"></child>
  </div>
</template>

<script>
export default {
  methods: {
    handleChangeValue(value) {
      console.log(value)
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="handleClick">Change Value</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('change-value', 'Hello World')
    }
  }
}
</script>

孙组件：

<template>
  <div>
    {{ parentValue }}
  </div>
</template>

<script>
export default {
  props: {
    parentValue: String
  }
}
</script>

在这个例子中，子组件中的按钮被点击时，会触发一个名为change-value的事件，并将'Hello World'作为参数传递给父组件中的handleChangeValue方法。父组件中的方法可以通过参数来获取这个值，并进行相应的处理。