东莞常平医院网站建设,福建网站制作,wordpress百万级,境外网站icp备案假设这个页面是vue开发的#xff0c;如果一整个页面都是编写在一个vue文件里面#xff0c;后期不好维护#xff0c;会特别的庞大#xff0c;那么如何这个时候需要进行组件化开发。组件化开发后必然会带来一个问题需要进行组件之间的通信。组要是父子组件之间通信#xff0…假设这个页面是vue开发的如果一整个页面都是编写在一个vue文件里面后期不好维护会特别的庞大那么如何这个时候需要进行组件化开发。组件化开发后必然会带来一个问题需要进行组件之间的通信。组要是父子组件之间通信非父子之间可以通过vuex或者pinia进行通信。 引用子组件的信息
import ChildComponent from ./HelloWorld.vue;
ChildComponent :messageparentMessage /父组件向子组件传递消息
templateChildComponent :messageparentMessage /
/templatescript setup
import { ref } from vue;
import ChildComponent from ./HelloWorld.vue;const parentMessage ref(Hello from Parent!);
/script子组件接收消息
templatediv{{ message }}/div
/templatescript setup
import { defineProps } from vue;//通过 defineProps 来接收父组件的消息
const props defineProps({message: String
});
/script子组件向父组件发送消息
templatebutton clicksendMessageToParentSend Message to Parent/button
/templatescript setup
import { defineEmits } from vue;const emit defineEmits([message-to-parent]);const sendMessageToParent () {emit(message-to-parent, Hello from Child!);
};
/script这段代码是使用 Vue 3 的 Composition API 编写的组件主要展示了如何通过 emit 在子组件中向父组件发送消息。我们来逐步分析这段代码。### 1. template 部分vue
templatebutton clicksendMessageToParentSend Message to Parent/button
/template这部分定义了组件的模板包含了一个按钮。当用户点击这个按钮时会触发 click 事件调用 sendMessageToParent 方法。这里的 click 是 Vue 的事件绑定语法它将按钮的点击事件与 sendMessageToParent 方法关联。
2. script setup 部分
script setup 是 Vue 3 中引入的简化写法用于更简洁地定义组件的逻辑。所有在 setup 中定义的变量和函数可以直接在模板中使用。
script setup
import { defineEmits } from vue;这里引入了 defineEmits 函数用于定义组件内的事件发送机制。
3. 定义 emit
const emit defineEmits([message-to-parent]);defineEmits 函数用来定义当前组件可以发出的自定义事件。这里定义了一个名为 message-to-parent 的事件表示子组件可以通过这个事件向父组件发送消息。emit 是一个方法通过它我们可以触发事件并可以携带参数发送给父组件。
4. 定义 sendMessageToParent 方法
const sendMessageToParent () {emit(message-to-parent, Hello from Child!);
};这个方法在用户点击按钮时触发内部调用 emit 方法触发 message-to-parent 事件。message-to-parent 是事件名称Hello from Child! 是发送的消息内容。
因此当按钮被点击时子组件会向父组件发送一个事件携带的消息内容是 Hello from Child!。
总结
这段代码展示了 Vue 3 通过 emit 向父组件发送消息的机制。defineEmits 用来声明子组件可以触发的自定义事件。sendMessageToParent 方法用于在点击按钮时触发自定义事件并将消息发送给父组件。
父组件接收到 message-to-parent 事件后可以通过绑定事件来处理这个消息例如显示、记录或做其他逻辑处理。 vue
templateChildComponent message-to-parentreceiveMessageFromChild /{{ messageFromChild }}
/templatescript setup
import { ref } from vue;
import ChildComponent from ./HelloWorld.vue;const messageFromChild ref();const receiveMessageFromChild (message) {messageFromChild.value message;
};
/script
