VUE框架组件中通信方式(1)

在vue2中组件通信方式如：

props:可以实现父子组件，子父组件，兄弟组件通信

自定义事件：实现子父组件通信

全局事件总线$bus：可以实现任意组件通信

pubsub：发布订阅模式实现任意组件通信

vuex：集中式状态管理容器，实现任意组件通信

ref：父组件获取子组件实例VC，获取子组件的响应式数据以及方法

slot：插槽（默认插槽，具名插槽，作用域插槽）实现父子组件通信

。。。。。。

vue3中组件通信方式：

1. props

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

点击查看代码

// 父组件代码
let money = ref(10000);

<Child info="我是曹操" :money="money"></Child>
//========================

// 子组件代码
//defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps(['info','money']); //数组|对象写法都可以
//按钮点击的回调
const updateProps = ()=>{
  // props.money+=10;  //props:只读的
  console.log(props.info)
}

<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>

2.自定义事件

2.1 原生DOM事件

在vue框架中事件分为两种：一种是原生的DOM事件，另外一种是自定义事件。

原生DOM事件可以让用户与网页进行交互：如：click，dbclick，change，mouseenter，mouseleave。。。。

自定义事件可以实现子组件给父组件传递数据

代码如下：

<pre @click="handler">花朵</pre>

const handler = () =>{
  alert('tishi')
}

当前代码级给pre标签绑定原生DOM事件点击事件，默认会给事件回调注入event事件对象。点击事件还可以注入多个参数，可以如下操作，但是注入的事件对象只能叫做$event。

<pre @click="handler(1,2,3,$event)">花朵</pre>

在vue3框架中click，dbclick，change（这类原生DOM事件），不管是在标签上还是在组件标签上都是原生DOM事件。

在vue2框架中却不是这样的，在vue2中组件标签需要通过native修饰符才能变成原生DOM事件

2.2 自定义事件

在vue3框架中没有this这个组件实例，所以没法使用this.$emit()去执行。在vue3中框架引入了defineEmits方法来返回自定义事件，该方法不需要引入可以直接使用。只需要将父组件中传入的方法名写入到defineEmits(['方法名1','方法名2'])参数中，但凡方法名被传入了，哪怕是click事件等DOM原生事件也变成了自定义事件。
defineEmits()返回的返回值是一个函数，返回值函数在执行时传入的参数内容，第一个参数是方法名，从第二参数开始才是父组件定义的函数所对应的参数如

<button @click="handler">点击我触发自定义事件xxx</button>
let $emit = defineEmits(['xxx']);
//按钮点击回调
const handler = () => {
  //第一个参数:事件类型 第二个|三个|N参数即为注入数据
    $emit('xxx','东风导弹','航母');
};

点击查看示例代码

// 父组件代码
<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:object)=>{
    //event即为事件对象
    console.log(event);
}
//事件回调--2
const handler1 = (a:number,b:number,c:number,$event:object)=>{
   console.log(a,b,c,$event)
}
//事件回调---3
const handler2 = ()=>{
    console.log(123);
}
//事件回调---4
const handler3 = (param1:string,param2:string)=>{
    console.log(param1,param2);
}
//事件回调--5
const handler4 = (param1:string,param2:string)=>{
     console.log(param1,param2);
}
</script>

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

<script setup lang="ts">

</script>

//子组件代码Event2
<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>