目前做的比较好的法律网站有哪些,臭臭猫网站建设,做网站商丘,电子商务营销模式有哪些自定义事件是典型的子传父的方法。 为什么叫自定义事件呢#xff1f;是因为我们用sendToygetToy这种格式写#xff0c;很显然#xff0c;在DOM中#xff0c;没有叫sendToy的事件。 父组件FatherComponent.vue:
script setup
import ChildComponent fr… 自定义事件是典型的子传父的方法。 为什么叫自定义事件呢是因为我们用sendToygetToy这种格式写很显然在DOM中没有叫sendToy的事件。 父组件FatherComponent.vue:
script setup
import ChildComponent from /components/ChildComponent.vue
import {ref} from vueconst childToy ref()
const getToy (value) {
childToy.value value
}
/scripttemplate
div classbg-blue h-75 w-100 ma-autoh1 classtext-center我是父组件/h1h3 classma-6儿子给我的玩具{{childToy}}/h3!--给子组件绑定事件--ChildComponent sendToygetToy/ChildComponent
/div
/template
在上面的代码中sendToygetToy我们用这种格式给子组件绑定了叫sendToy的事件。
子组件ChildComponent.vue
script setup
import {ref} from vueconst toy ref(奥特曼)//接受父亲传过来的事件
const emit defineEmits([sendToy])
/scripttemplatediv classbg-purple h-50 w-75 ma-autoh1 classtext-center我是子组件/h1h3 classml-6儿子的玩具{{toy}}/h3v-btn clickemit(sendToy,toy) classbg-blue text-white ml-6把玩具给父亲/v-btn/div
/template
在子组件中用defineEmits来接受父组件给子组件绑定的sendToy事件。 在v-btn标签中用clickemit(sendToy,toy)这种格式调用sendToy事件并且把子组件的数据toy也带上。
