vue 子父页面传值

Vue中子组件向父组件传值可以通过$emit方法实现，具体步骤如下：
1.在父组件中给子组件绑定自定义事件，例如@customEvent="handleCustomEvent"，其中handleCustomEvent是父组件中的一个方法。
2.在子组件中，当需要向父组件传递数据时，使用this.$emit('customEvent', data)，其中customEvent是父组件中绑定的自定义事件名，data是要传递的数据。
3.在父组件中实现handleCustomEvent方法，该方法接收子组件传递过来的数据，例如handleCustomEvent(data){...}。

Vue中父组件向子组件传值可以通过props和v-model实现，具体步骤如下：
1.在父组件中使用v-model绑定子组件的值，例如:v-model="show"，其中show是父组件中的一个data属性。
2.在子组件中，使用props接收父组件传递过来的值，例如props:['value']，其中value是父组件中绑定的v-model的值。
3.在子组件中，当需要修改父组件中的值时，使用this.$emit('input', data)，其中input是v-model默认的自定义事件名，data是要修改的值。

下面是一个示例代码：

<!-- 父组件 -->
<template>
  <div>
    <child-component @customEvent="handleCustomEvent" v-model="show"></child-component>
    <p>父组件中的show值为：{{show}}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      show: ''
    }
  },
  methods: {
    handleCustomEvent(data) {
      console.log('子组件传递过来的数据为：', data)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <input type="text" :value="value" @input="handleInput">
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    handleInput(event) {
      this.$emit('input', event.target.value)
    }
  }
}
</script>