悉知网站建设,珠海网站建设怎样,电子商务网站的功能分析,崇明装修公司哪家好本书目录#xff1a;点击进入 一、组件之间为什么要做通信
二、组件之间通信方式
2.1、父传子#xff1a;由传递属性实现
stage 1#xff1a;申明 #xff08;即定义#xff09;
stage 2#xff1a;注册
stage 3#xff1a;使用
【示例】#xff1a;父组件将 tit…本书目录点击进入 一、组件之间为什么要做通信
二、组件之间通信方式
2.1、父传子由传递属性实现
stage 1申明 即定义
stage 2注册
stage 3使用
【示例】父组件将 title 和 count 传递给子组件 普通数据 和 响应式数据的传递 代码 效果
2.2、子传父由自定义事件实现
stage 1申明 即 父组件定义方法 子组件调用方法
stage 2注册
stage 3使用 【示例】子组件将 data 传递给父组件 代码 效果 一、组件之间为什么要做通信
主要是为了让组件满足不同的需求
如
评分组件显示由5颗星变成10颗星按钮组件显示红色删除比较危险 二、组件之间通信方式
vue中有4-5种本节介绍最常见的
父子通信 2.1、父传子由传递属性实现
stage 1申明 即定义
stage 2注册
stage 3使用 【示例】父组件将 title 和 count 传递给子组件 普通数据 和 响应式数据的传递 普通数据titlehello world 无法响应式修改数据 响应式数据 :countcount 代码
bodydiv idappmy-head titlehello world :countcount/my-head/divscriptlet app Vue.createApp({data(){return {count: 10,title: hello vue3}},mounted(){setTimeout((){this.title hello vue3;this.count 20;}, 2000)}})app.component(MyHead, {props: {count: {type: Number}},props: [title, count],template: headerdiv{{ title }},{{ count }}/divh2logo/h2ulli首页/lili视频/lili音乐/li/ul/header});let vm app.mount(#app);/script
/body 效果 2.2、子传父由自定义事件实现
stage 1申明 即 父组件定义方法 子组件调用方法
stage 2注册
stage 3使用 【示例】子组件将 data 传递给父组件 代码
body
div idappdiv{{message}}/divmy-head custom-clickhandleClick/my-head/divscriptlet app Vue.createApp({data(){return {message: app Data}},methods: {handleClick(data){// console.log(data);this.message data;}}})app.component(MyHead, {emits: [custom-click], template: headerh2logo/h2ulli首页/lili视频/lili音乐/li/ul/header,mounted(){setTimeout((){this.$emit(custom-click, MyHead Data)}, 2000)}});let vm app.mount(#app);/script
/body 效果
