组件通信props方式

组件通信props方式组件通信的概念简单来说在vue中组件就是来构建一个一个的页面的。所谓的组件通信就是各个组件的连接扣父子通信基石这是最基础、最高频的通信方式1.父传子Props预置代码##子组件 template div classbox h3子组件/h3 /div /template script setup langts /script style scoped .box { background-color: #88ccee; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } /style##父组件 template div classbox h3父组件/h3 Child / /div /template script setup langts import Child from ./Child.vue /script style scoped .box { background-color: #999; padding: 20px; border-radius: 10px; } /style现在我们向父组件写点数据例如父亲有100w存款import { ref } from vue; const Money ref(存折100W);现在父组件要把100w传给子组件//父组件 Child :moneyMoney ///子组件 template div classbox h3子组件/h3 h3父给子的{{ money }}/h3 /div /template script setup langts defineProps([money]) /script注意这里还老生常谈的几个注意事项在HTML模板中驼峰式命名会被props自动转换为短横线形式例如initCount会被转为init-count;如果props被解构被解构出来的变量会失去响应式可以使用toRefs来为其变为响应式2. 子传父一使用回调函数的方式首先父亲先定义一个方法这个方法用于子组件向他传递东西function getToy(value: string) { console.log(value); }然后将这个函数传递给子组件Child :moneyMoney :sendToygetToy /然后我们给子组件写点数据,并生成也给按钮按钮点击之后向父组件发送数据script setup langts defineProps([money, sendToy]) import { ref } from vue; let toy ref(迪迦奥特曼) /script template div classbox h3子组件/h3 h4玩具{{ toy }}/h4 h3父给子的{{ money }}/h3 button clicksendToy(toy)把玩具给父亲/button /div /template之后我们将数据呈现到父组件上面去template div classbox h3父组件/h3 h4{{ Money }}/h4 h4 v-showChildToy子父的玩具:{{ ChildToy }}/h4 Child :moneyMoney :sendToygetToy / /div /template script setup langts import Child from ./Child.vue import { ref } from vue; let Money ref(存折100W); let ChildToy ref(); function getToy(value: string) { ChildToy.value value; } /script二使用Emits的方式、子组件通过defineEmits声明事件并在适当时机触发父组件监听该事件。直接给代码解释template div classbox h3子组件/h3 h4玩具{{ toy }}/h4 h3父给子的{{ money }}/h3 button clickhandleClick把玩具给父亲/button /div /template script setup langts defineProps([money]) import { ref } from vue; let toy ref(迪迦奥特曼) const emit defineEmits([toy]) function handleClick() { emit(toy, toy) } /script style scoped .box { background-color: #88ccee; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } /styletemplate div classbox h3父组件/h3 h4{{ Money }}/h4 h4 v-showChildToy子给父的玩具: {{ ChildToy }}/h4 Child :moneyMoney toyupdateToy / /div /template script setup langts import Child from ./Child.vue import { ref } from vue; let Money ref(存折100W); const ChildToy ref() function updateToy(val: string) { ChildToy.value val } /script style scoped .box { background-color: #999; padding: 20px; border-radius: 10px; } /style上面的代码简单解释一下defineEmits是用来声明你想要触发什么样的事件emit有两个参数第一个参数是你想触发什么样的事件第二个是事件携带的参数之后在父组件定义一个处理函数然后监听子组件的事件上面还需要引入一个event知识点我们发现再子组件中是通过event知识点我们发现再子组件中是通过event知识点我们发现再子组件中是通过emit来注册事件的然后将数据作为参数传入进行那么在父组件中是通过event接受的在原生DOM中event接受的在原生DOM中event接受的在原生DOM中event是该事件的事件对象如果是在自定义事件比如子组件emit触发的事件$event指向的是子组件emit时传递的第一个参数如果传递了多个参数$event是一个数组包含所有参数。总结props是使用频率最高的它可以实现父传子子传父如果是父传子属性值不是函数如果是子传父的话属性值就是函数了当组件有多层嵌套的时候千万不要使用Props来传递虽然这样可以但是非常痛苦Vue是单项数据流父组件通过props向子组件传递数据数据是向下流动的子组件是向父组件通知变化事件向上冒泡设计这样的数据流动的话便于调试和维护永远不要在子组件中直接修改父组件传递过来的props。