vue3组件通信方法

1.Props:

父子传参

父组件：

在父组件内引入子组件，并且给子组件绑定一个money参数。

<template>
  <div>
    //并且给子组件绑定一个money参数
    <Child  :money="money"></Child>
  </div>
</template>

<script setup lang="ts">
//引入子组件
import Child from './AboutView.vue'
import {ref} from 'vue'
//参数为1111
const money=ref(1111)
</script>

<style scoped>

</style>

子组件：

子组件用defineProps接收从父组件传递过来的参数，可以直接使用。

<template>
  <div>
{{ props.money }}
  </div>
</template>

<script setup lang="ts">
const props=defineProps(['money'])
console.log(props);
</script>

<style scoped>

</style>

props中的数据通常是只读的，子组件不能修改从父组件传递下来的数据

2.$emit

子父传参

在vue框架中事件分为两种：一种是原生的DOM事件，另一种自定义事件。原生DOM事件可以让用户与网页进行交互，比如：click（点击事件），change（当输入框发生变化时触发事件）。自定义事件可以实现子组件给父组件传递参数。（vue2中的@click绑定的事自定义事件，可以通过.native修饰符变为原生DOM事件。vue3绑定的是原生事件，利于defineEmits方法返回函数触发自定义事件，无需引入，直接使用）

子组件：

<template>
  <div>
<button @click="butclick">子组件</button>
  </div>
</template>

<script setup lang="ts">
//defineEmits写一个命名
const $emit=defineEmits(['comds'])
const butclick=()=>{
  //给父组件传递命名和内容(22222)
  $emit('comds','22222')
}
</script>

<style scoped>

</style>

父组件：

<template>
  <div>
     <Child  :money="money" @comds="comchild" ></Child>
{{ son }}
  </div>
</template>

<script setup lang="ts">
import Child from './AboutView.vue'
import {ref} from 'vue'
const money=ref(1111)
let son=ref('')
const comchild=(value:any)=>{
  son.value=value
}
</script>

<style scoped>

</style>