Vue3 父子组件通信

Dad组件

<template>
  <Son :value="value"/>
</template>
<script lang="ts">
export default{
  setup(){
  	const value = "I'm dad"
  	return {value}
  }
}
</script>

在Vue3里 setup代替了data; 在这里 Dad组件引用了Son组件并且传一个变量给Son

Son 组件

<template>
	{{value}}
</template>
<script lang="ts">
export default{
  props:{
  	value:String
  }
}
</script>

Son 使用props接受父组件传来的变量。在这里外面使用的是TS所以要声明一下类型。在模板里引用没有变化。

Son 组件触发事件给 Dad组件 传值

<!-- >Dad 组件<-->
<Son :value="value" @update:value="value = $event" >
<!-- >Son 组件<-->
<template>
	{{value}}
  <button @click="change">change</button>
  </template>
<script lang="ts">
export default{
  props:{
  	value:String
  },
  setup(props,context){
  	const change = ()=> context.emit('update:value','I'm son')
  	return {change}
  }
}
</script>

在Vue3 里，以前是this.$emit 现在在setup里使用第二个参数context.emit即可。 还有Dad组件接受值$event 是 context.emit函数第二参数。 如果要改props的值。在setup里调用第一个参数props即可。

使用v-model

<!-->由于父子组件通信在使用过程中很常见，可以使用v-model更改。Dad组件<-->
<!-->Dad组件<-->

<Son v-model:value="value"/>

<Son :value="value" @update:value="value = $event" />

<!--> 这两个是一样的。 <-->