网站主页设计收费,官网网站域名与建设,网站技术解决方案不包括,重庆电商网站建设上一篇我们聊了如何用 Vue.js 创建一个简单的组件#xff0c;这次咱们再往前走一步#xff0c;讲讲 Vue.js 的父子组件通信。组件开发里#xff0c;最重要的就是让组件之间能够“说话”#xff0c;数据能流通起来。废话不多说#xff0c;直接开干#xff01; 父组件传数据…
上一篇我们聊了如何用 Vue.js 创建一个简单的组件这次咱们再往前走一步讲讲 Vue.js 的父子组件通信。组件开发里最重要的就是让组件之间能够“说话”数据能流通起来。废话不多说直接开干 父组件传数据给子组件
1. 父组件用 props 给子组件传值
在上一篇的按钮组件基础上我们稍微改进下。假设我们有一个表单组件 MyForm.vue里面有两个按钮一个提交一个重置
父组件代码
templatedivh3请填写表单/h3input typetext placeholder输入内容 v-modelinputValue /MyButton :label提交 :typeprimary clickhandleSubmit /MyButton :label重置 :typesecondary clickhandleReset //div
/templatescript
import MyButton from ./MyButton.vue;export default {components: {MyButton,},data() {return {inputValue: ,};},methods: {handleSubmit() {alert(提交内容${this.inputValue});},handleReset() {this.inputValue ;},},
};
/script亮点解释
props 传值MyButton 用 label 和 type 控制按钮显示的内容和样式。事件绑定父组件用 click 把点击事件传给子组件子组件不需要关心逻辑。 子组件怎么传消息给父组件
在复杂场景里子组件也需要把自己的“想法”告诉父组件比如一个复选框列表用户选择了某些选项我们得把这些选项告诉父组件。
2. 子组件用 emit 通知父组件
我们来改造下按钮组件让它在点击时通知父组件“我被点了”。
子组件代码
templatebutton :classbuttonClass clicknotifyParent{{ label }}/button
/templatescript
export default {props: [label, type],methods: {notifyParent() {this.$emit(button-clicked, this.label);},},
};
/script父组件代码
MyButton label提交 button-clickedhandleChildClick /
MyButton label取消 button-clickedhandleChildClick /父组件里的方法
methods: {handleChildClick(label) {alert(你点击了按钮${label});},
},亮点解释
$emit 的作用子组件通过 $emit 触发事件把数据传给父组件。事件监听父组件监听 button-clicked 事件就能知道哪个按钮被点了。 小结
父子组件通信很简单 父传子用 props。 子传父用 $emit。
这些小技巧能让你的组件更灵活下次我们再聊聊更高级的通信方式比如兄弟组件之间如何通信。敬请期待
