组件间传值及监听
说明
- 本教程是vue3组件间传值及子组件触发父组件事件、监听(computed、watch)
- 父传子
- 子组件触发父组件事件
- 监听computed
- 监听watch
一、父传子
- 在父组件的标签中做如下操作:(父组件传值)
<组件 :变量1 = value :变量2 = vlaue ···></组件>
- 在子组件的script中做如下操作:(子组件接收值)
const var = defineProps({
变量1:类型,
变量2:类型
})
注:父子组件传递与接收变量名要一至
二、子组件触发父组件事件
- 在父类script中定义事件及传递事件
- 在标签中(template)
<父组件 @传递事件名1=定义事件1 @传递事件名2=定义事件2 ··· ></>
- 在script中
const 定义事件1 = ()=>{
···}
const 定义事件2 = ()=>{
···}
- 子组件接收事件及触发父组件事件
- 子组件接收事件
//在script中定义
const emits = defineEmits(['传递事件名1','传递事件名2'···])
- 触发父组件事件
//在script中使用
emits("传递事件名1")
//在标签中使用
<标签 @事件="$emits('传递事件名1')"></标签>
四、监听computed
const var1 = computed(()=>var.变量)
注:computed返回的值不可以改变,但与watch都有监听功能,动态变量
只有var.变量的值改变了,computed返回的值才会发生改变,并且是动态的。
是watch是缩写版
五、监听watch
watch(函数1,函数2)
//注:函数1是用来指定要监听的值,函数2是用来给其它娈量属值的
//函数2完整函数是:
(newvlaue,oldvaule)=>{
return ···
}