子组件给父组件传值，自定义

### 实现子组件向父组件传递值 在 Vue.js 中，子组件可以利用 `$emit` 方法触发自定义事件并附带参数，从而将数据发送到父组件。这种方式不仅灵活而且易于维护。 #### 使用 `v-model` 的双向绑定方式 当涉及到表单输入或其他需要同步状态的情况时，推荐使用 `v-model` 来简化父子组件间的交互逻辑。为了使这种模式生效，在子组件内部发出名为 `input` 的特定事件，并确保父级使用的 prop 名称为 `value`[^4]。 ```html <!-- ParentComponent.vue --> <template> <div> <!-- 绑定 value 并监听 input 事件 --> <ChildComponent v-model="parentData"/> {{ parentData }} </div> </template> <script> export default { data() { return { parentData: '' }; } } </script> ``` ```html <!-- ChildComponent.vue --> <template> <button @click="updateParent">点击更新父组件数据</button> </template> <script> export default { props: ['value'], methods: { updateParent() { const newValue = '新消息'; this.$emit('input', newValue); } } } </script> ``` #### 自定义事件名称与属性名 如果不想局限于 `v-model` 所规定的命名约定，则可以在任意位置自由指定事件的名字以及对应的处理函数。只需保证子组件调用 `$emit(eventName, payload)` 发送信息的同时，父组件相应地绑定了该事件处理器即可[^3]。 ```html <!-- AnotherParentComponent.vue --> <template> <div> <AnotherChildComponent :message="msgFromParent" @custom-event="handleCustomEvent"/> Received message from child: {{ receivedMessage }} </div> </template> <script> import AnotherChildComponent from './AnotherChildComponent'; export default { components: { AnotherChildComponent }, data() { return { msgFromParent: "来自父亲的消息", receivedMessage: "" }; }, methods: { handleCustomEvent(data) { console.log("接收到子组件发来的:", data); this.receivedMessage = data; } } }; </script> ``` ```html <!-- AnotherChildComponent.vue --> <template> <p>{{ message }}</p> <button @click="sendMessageToParent()">Send Message to Parent</button> </template> <script> export default { props: ["message"], methods: { sendMessageToParent() { let customMsg = "这是子组件的信息"; this.$emit("custom-event", customMsg); // 触发自定义事件并向上传递数据 } } }; </script> ```