组件间传值及监听

Source

说明

  1. 本教程是vue3组件间传值及子组件触发父组件事件、监听(computed、watch)
  2. 父传子
  3. 子组件触发父组件事件
  4. 监听computed
  5. 监听watch

一、父传子

  1. 在父组件的标签中做如下操作:(父组件传值)
<组件 :变量1 = value :变量2 = vlaue ···></组件>
  1. 在子组件的script中做如下操作:(子组件接收值)
const var = defineProps({
    
      
	变量1:类型,
	变量2:类型
})

注:父子组件传递与接收变量名要一至

二、子组件触发父组件事件

  1. 在父类script中定义事件及传递事件
  • 在标签中(template)
<父组件 @传递事件名1=定义事件1 @传递事件名2=定义事件2  ··· ></>
  • 在script中
const 定义事件1 = ()=>{
    
      ···}
const 定义事件2 = ()=>{
    
      ···}
  1. 子组件接收事件及触发父组件事件
  • 子组件接收事件
//在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 ···
	}