vue3中的组件通信

props通信

可以实现父子组件通信，props数据还是只读的！！！

<template>
  <div class="box">
    <h1>props:我是父组件曹操</h1>
    <hr />
    <Child info="我是曹操" :money="money"></Child>
  </div>
</template>

<script setup lang="ts">
//props:可以实现父子组件通信,props数据还是只读的！！！
import Child from "./Child.vue";
import { ref } from "vue";
let money = ref(10000);
</script>

<style scoped>
.box {
  width: 100vw;
  height: 400px;
  background: yellowgreen;
}
</style>

<template>
  <div class="son">
    <h1>我是子组件:曹植</h1>
    <p>{{ props.info }}</p>
    <p>{{ props.money }}</p>
    <!--props可以省略前面的名字--->
    <p>{{ info }}</p>
    <p>{{ money }}</p>
    <button @click="updateProps">修改props数据</button>
  </div>
</template>

<script setup lang="ts">
//需要使用到defineProps方法去接受父组件传递过来的数据
//defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps(["info", "money"]); //数组|对象写法都可以
// let props = defineProps({
//   info:{
//    type:String,//接受的数据类型
//    default:'默认参数',//接受默认数据
//   },
//   money:{
//    type:Number,
//    default:0
// }}); // 对象写法
// 这里的props只是一个代理项，在模板中使用时是可以省略的。
//按钮点击的回调
const updateProps = () => {
  // props.money+=10;  props:只读的
  console.log(props.info);
};
</script>

<!-- <script>
export default {
  props: ["info", "money"]
};
// 这里是vue2选择式api的写法，vue3都用上面那个组合式api的写法。
</script> -->

<style scoped>
.son {
  width: 400px;
  height: 200px;
  background: hotpink;
}
</style>

自定义事件

<template>
  <div>
    <h1>事件</h1>
    <!-- 原生DOM事件 -->
    <pre @click="handler">
      大江东去浪淘尽,千古分流人物
    </pre>
    <button @click="handler1(1, 2, 3, $event)">点击我传递多个参数</button>
    <hr />
    <!--
        vue2框架当中:这种写法自定义事件,可以通过.native修饰符变为原生DOM事件
        vue3框架下面写法其实即为原生DOM事件

        vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件
      -->
    <Event1 @click="handler2"></Event1>
    <hr />
    <!-- 绑定自定义事件xxx:实现子组件给父组件传递数据 -->
    <Event2 @xxx="handler3" @click="handler4"></Event2>
  </div>
</template>

<script setup lang="ts">
//引入子组件
import Event1 from "./Event1.vue";
//引入子组件
import Event2 from "./Event2.vue";
//事件回调--1
const handler = event => {
  // 原生DOM事件，会向事件回调注入事件对象
  //默认就是event，即为事件对象
  console.log(event);
};
//事件回调--2
const handler1 = (a, b, c, $event) => {
  console.log(a, b, c, $event);
};
//事件回调---3
const handler2 = () => {
  console.log(123);
};
//事件回调---4
const handler3 = (param1, param2) => {
  console.log(param1, param2);
};
//事件回调--5
const handler4 = (param1, param2) => {
  console.log(param1, param2);
  // alert("123");
};
</script>

<style scoped></style>

<template>
  <div class="son">
      <p>我是子组件1</p>
      <button>点击我也执行</button>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.son{
  width: 400px;
  height: 200px;
  background: skyblue;
}
</style>

<template>
  <div class="child">
    <p>我是子组件2</p>
    <button @click="handler">点击我触发自定义事件xxx</button>
    <button @click="$emit('click', 'AK47', 'J20')">
      点击我触发自定义事件click
    </button>
  </div>
</template>

<script setup lang="ts">
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
let $emit = defineEmits(["xxx", "click"]);
//按钮点击回调
const handler = () => {
  //第一个参数:事件类型 第二个|三个|N参数即为注入数据
  $emit("xxx", "东风导弹", "航母");
};
</script>

<style scoped>
.child {
  width: 400px;
  height: 200px;
  background: pink;
}
</style>

在vue框架中，事件分为两种：原生的DOM事件，自定义事件。
原生的DOM事件可以让用户与网页进行交互，比如：click、dbclick、change、mouseenter、mouseleave…
自定义事件可以实现子组件给父组件传递数据。

原生DOM事件

<pre @click="handler">
      我是祖国的老花骨朵
 </pre>
 <div @click="handler1(1,2,3,$event)">我要传递多个参数</div>

当前代码级给pre标签绑定原生DOM事件点击事件，默认会给事件回调注入event事件对象。点击事件也可以注入多个参数。
**切记：**注入的事件对象务必叫做$event。
在vue3框架中，click、dbclick、change（这类原生DOM事件），不管是在标签、自定义标签上（组件标签）都是原生DOM事件。
但在vue2中，组件标签需要通过.native修饰符才能变为原生DOM事件。