Vue的父子页面如何相互传值和调用方法

????????在Vue中，父子页面之间的数据传递可以通过props和事件来实现。以下是一个简单的示例，展示了如何在Vue中实现父子页面之间的数据传递：

首先，在父页面中定义一个子组件，并使用props将数据传递给子组件：

<template>  
  <div>  
    <p>父页面数据：{{ parentData }}</p>  
    <child-component :childData="parentData"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentData: '这是父页面的数据'  
    };  
  }  
};  
</script>

????????在上面的示例中，我们通过childData属性将父页面的数据传递给子组件。

接下来，在子组件中接收传递过来的数据，并在需要的时候触发一个事件，将数据传递回父页面：

<template>  
  <div>  
    <p>子组件接收到的数据：{{ childData }}</p>  
    <button @click="updateParentData">更新父页面数据</button>  
  </div>  
</template>  
  
<script>  
export default {  
  props: ['childData'],  
  methods: {  
    updateParentData() {  
      this.$emit('updateParentData', '这是子组件更新的数据');  
    }  
  }  
};  
</script>

????????在子组件中，我们通过props接收父页面传递过来的数据。当用户点击按钮时，触发updateParentData方法，并通过$emit方法触发一个名为updateParentData的事件，将更新的数据传递回父页面。

????????最后，在父页面中监听这个事件，并在事件处理函数中更新父页面的数据：

<template>  
  <div>  
    <p>父页面数据：{{ parentData }}</p>  
    <child-component :childData="parentData" @updateParentData="updateParentData"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentData: '这是父页面的数据'  
    };  
  },  
  methods: {  
    updateParentData(newData) {  
      this.parentData = newData;  
    }  
  }  
};  
</script>