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中实现父子组件通信的一种常用且强大的方式。