vue框架学习-- 父子页面 参数方法调用

一、父组件向子组件传递参数

在Vue中，父组件向子组件传递参数是一种非常常见的通信方式，这通常通过props来实现。props允许父组件向子组件传递数据，并且这些数据是单向的，即子组件不能直接修改由父组件传递的数据。但是，子组件可以通知父组件来修改这些数据。

1. 父组件向子组件传递参数的步骤

(1) 定义子组件的props

在子组件中，首先定义从父组件接收的数据。这通过在子组件的<script>部分中指定props数组或对象来完成。

<!-- 子组件 ChildComponent.vue -->  
<template>  
  <div>  
    <p>接收到的消息: {{ message }}</p>  
  </div>  
</template>  
 
<script>  
export default {  
  props: ['message'], // 定义了一个名为message的prop  
  // 你可以在这里添加其他组件选项...  
}  
</script>

(2) 在父组件中传递参数

然后，在父组件的模板中，当你使用子组件时，你可以通过动态绑定（使用:或v-bind:）将父组件的数据或表达式作为prop传递给子组件。

<!-- 父组件 ParentComponent.vue -->  
<template>  
  <div>  
    <child-component :message="parentMessage"></child-component>  
  </div>  
</template>  
 
<script>  
import ChildComponent from './ChildComponent.vue';  
 
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from Parent' // 父组件中的数据  
    }  
  }  
  // 你可以在这里添加其他组件选项...  
}  
</script>

在这个例子中，parentMessage是父组件ParentComponent中的一个数据属性，我们通过:message="parentMessage"将其作为prop传递给子组件ChildComponent。在子组件中，我们定义了一个名为message的prop来接收这个值，并在模板中通过{{ message }}显示它。

通过这种方式，Vue实现了父组件向子组件的单向数据流。父组件可以更新传递给子组件的数据，而子组件不能直接修改这些数据（尽管它可以触发事件来请求父组件进行修改）。这种机制有助于保持应用数据的清晰和可预测性。

二、子组件向父组件回调参数

Vue 中，$emit 是一个实例方法，用于子组件向父组件触发事件。当子组件需要向父组件传递数据或通知父组件某些事情发生时，这个方法非常有用。

使用场景

假设有一个表单组件（我们称之为 FormComponent），它收集了一些用户输入的数据并存储在 formData 属性中。当表单提交时，可能希望将这些数据发送到父组件以便进一步处理（如保存到数据库）。这时，可以使用 this.$emit 来触发一个事件，并将 formData 作为参数传递给父组件。

子组件（FormComponent）

<template>  
  <form @submit.prevent="handleSubmit">  
    <!-- 表单元素 -->  
    <button type="submit">提交</button>  
  </form>  
</template> 
 
<script>  
export default {  
  data() {  
    return {  
      formData: {  
        // 假设这里有一些表单数据  
        name: '',  
        email: ''  
      }  
    }  
  },  
  methods: {  
    handleSubmit() {  
      // 表单提交时，触发commit事件，并传递formData  
      this.$emit('commit', this.formData);  
    }  
  }  
}  
</script>

父组件定义方法

在父组件中，你需要监听来自子组件的 commit 事件，并定义一个方法来处理接收到的数据。

<template>  
  <div>  
    <form-component @commit="handleCommit"></form-component>  
  </div>  
</template>  
  
<script>  
import FormComponent from './FormComponent.vue';  
  
export default {  
  components: {  
    FormComponent  
  },  
  methods: {  
    handleCommit(formData) {  
      // 处理接收到的formData  
      console.log(formData); // 假设你想在控制台查看这些数据  
      // 这里可以进一步处理数据，如发送到服务器  
    }  
  }  
}  
</script>

通过 this.$emit('commit', this.formData)，子组件能够在特定事件（如表单提交）发生时，将需要的数据（如 formData）传递给父组件。父组件通过监听这个事件（@commit="handleCommit"），并定义一个方法来处理接收到的数据，从而实现组件间的通信。这是Vue.js中实现父子组件通信的一种常用且强大的方式。

原文地址：https://blog.csdn.net/dazhong2012/article/details/142598147

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！