vue中父页面如何给子页面传值？子页面又该如何从父页面取值？

父页面给子页面传值的方式有多种，以下是其中的两种：

1. 使用props属性

父组件可以通过props属性将数据传递给子组件。在子组件中，通过props选项来声明需要接收的数据。

父组件：

<template>
  <child-component :propName="parentData"></child-component>
</template>

<script>
export default {
  data() {
    return {
      parentData: 'hello world'
    }
  }
}
</script>

子组件：

<template>
  <div>{{propName}}</div>
</template>

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

2. 使用$emit方法

父组件可以通过$emit方法触发子组件中的自定义事件，并传递需要的数据。

父组件：

<template>
  <child-component @customEvent="onCustomEvent"></child-component>
</template>

<script>
export default {
  methods: {
    onCustomEvent(data) {
      console.log(data)
    }
  }
}
</script>

子组件：

<template>
  <button @click="emitCustomEvent">Click Me</button>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('customEvent', 'hello world')
    }
  }
}
</script>

子页面如何从父页面取值，可以通过以下两种方式：

1. 使用props属性

子组件中可以直接通过props属性来获取从父组件传递过来的数据。

<template>
  <div>{{propName}}</div>
</template>

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

2. 使用$parent属性

子组件中可以通过$parent属性来获取父组件的实例，然后再通过该实例来访问父组件中的数据。

<template>
  <div>{{parentData}}</div>
</template>

<script>
export default {
  computed: {
    parentData() {
      return this.$parent.parentData
    }
  }
}
</script>

需要注意的是，使用$parent属性获取父组件的实例是一种不太推荐的方式，因为它会使子组件与父组件之间产生紧密的耦合。在可能的情况下，建议使用props属性来传递数据。