phpstorm网站开发,快速做效果图的网站叫什么软件,wordpress调整时间,云南高端网站建设一、第一种#xff0c;通过props方式传值#xff1a;
父组件#xff1a;
父组件调用子组件Child1时通过 :msg2 msg2把msg2的数据传给子组件#xff0c;并且通过自定义事件接收子组件的emit通知#xff0c;用来修改父组件的msg2数据。
源码#xff1a;
通过props方式传值
父组件
父组件调用子组件Child1时通过 :msg2 msg2把msg2的数据传给子组件并且通过自定义事件接收子组件的emit通知用来修改父组件的msg2数据。
源码
templatediv我是home组件 父组件h1{{ msg }}/h1div父组件--props方式传值{{ msg2 }}/divChild1 :msg2msg2 eventeventFn //div
/template
script setup
import { ref } from vue
import Child1 from ./child1.vue
const props defineProps([msg])const msg2 ref(今天是星期三多云。)const eventFn (val) {msg2.value val
}/script
子组件
子组件通过defineProps接收一下msg2 可以直接展示在模板上子组件自定义emit事件去通知父组件修改msg2的数据数值是子组件传过去的。
源码:
templatedivh3大家好我是子组件1/h3button clickhandleClick修改父组件数据msg2/buttondiv子组件——props方式传过来{{ msg2 }}/div/div
/templatescript setup
import { ref, reactive } from vue
const props defineProps([msg2])const emit defineEmits([event])const handleClick () {emit(event, 希望早日出太阳暴富而不是暴晒)
}/script
点击前 点击后 二、第二种通过v-model冒号要传的值 的方式这个v-model可以写多个
父组件
父组件调用子组件时通过v-model:numnum 的方式传值给子组件。
源码
templatediv我是home组件 父组件h1{{ msg }}/h1div父组件--props方式传值{{ msg2 }}/divdiv父组件num——v-model方式传值{{ num }}/divChild1:msg2msg2 eventeventFnv-model:numnum//div
/templatescript setup
import { ref, reactive } from vue
import Child1 from ./child1.vue
const props defineProps([msg])const msg2 ref(今天是星期三多云。)
const num ref(0)const eventFn (val) {msg2.value val
}/script
子组件
子组件也先通过defineProps接收一下num并展示。然后通过自定义emit事件
const emit defineEmit([update: num])
然后通过点击事件updateNum方法来触发通知父组件修改num数据。
源码
templatedivh3大家好我是子组件1/h3button clickhandleClick修改父组件数据msg2/buttondiv子组件——props方式传过来{{ msg2 }}/divbutton clickupdateNum修改父组件num/buttondiv子组件num——v-model方式传过来{{ num }}/div/div
/templatescript setup
import { ref, reactive } from vue
const props defineProps([msg2,num])const emit defineEmits([event, update:num])const handleClick () {emit(event, 希望早日出太阳暴富而不是暴晒)
}
const updateNum () {emit(update:num, 222)
}/script
点击前 点击后 三、父组件调用子组件时通过v-model传多个值
父组件写法 子组件写法 效果 以上就是vue3中props和v-model两种常用的父子组件通信方法 。
