Vue3通信方式之defineProps、defineEmits、useAttrs、插件mitt和v-model ...

1、使用defineProps

   props可以实现父子组件通信,在vue3中我们可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用！
  父组件给子组件传递数据

1.     <Child info="我爱祖国" :money="money"></Child>

复制代码

子组件获取父组件传递数据:方式1

1.     let props = defineProps({
2.       info:{
3.        type:String,//接受的数据类型
4.        default:'默认参数',//接受默认数据
5.       },
6.       money:{
7.        type:Number,
8.        default:0
9.     }})

复制代码

子组件获取父组件传递数据:方式2

1.     let props = defineProps(["info",'money']);

复制代码

  子组件获取到props数据就可以在模板中使用了,但是牢记props是只读的(只能读取，不能修改)
  2、使用defineEmits继续自界说事件

   在vue框架中事件分为两种:一种是原生的DOM事件，另外一种自界说事件。
    原生DOM事件可以让用户与网页进行交互，好比click、dbclick、change、mouseenter、mouseleave…
    自界说事件可以实现子组件给父组件传递数据
  2.1原生DOM事件

代码如下:

1.      <pre @click="handler">
2.           我是祖国的老花骨朵
3.      </pre>

复制代码

  当前代码级给pre标签绑定原生DOM事件点击事件,默认会给事件回调注入event事件对象。固然点击事件想注入多个参数可以按照下图操作。但是牢记注入的事件对象务必叫做$event.

1.       <div @click="handler1(1,2,3,$event)">我要传递多个参数</div>

复制代码

在vue3框架click、dbclick、change(这类原生DOM事件),不管是在标签、自界说标签上(组件标签)都是原生DOM事件。
  2.2自界说事件

   自界说事件可以实现子组件给父组件传递数据.在项目中是比较常用的。
    好比在父组件内部给子组件(Event2)绑定一个自界说事件

1.     <Event2  @xxx="handler3"></Event2>

复制代码

  在Event2子组件内部触发这个自界说事件

1.     <template>
2.       <div>
3.         <h1>我是子组件2</h1>
4.         <button @click="handler">点击我触发xxx自定义事件</button>
5.       </div>
6.     </template>
7.    
8.     <script setup lang="ts">
9.     let $emit = defineEmits(["xxx"]);
10.     const handler = () => {
11.       $emit("xxx", "法拉利", "茅台");
12.     };
13.     </script>
14.     <style scoped>
15.     </style>

复制代码

  我们会发如今script标签内部,使用了defineEmits方法，此方法是vue3提供的方法,不需要引入直接使用。defineEmits方法执行，传递一个数组，数组元素即为将来组件需要触发的自界说事件范例，此方执行会返回一个$emit方法用于触发自界说事件。
    当点击按钮的时间，事件回调内部调用$emit方法去触发自界说事件,第一个参数为触发事件范例，第二个、三个、N个参数即为传递给父组件的数据。
    需要注意的是:代码如下

1.     <Event2  @xxx="handler3" @click="handler"></Event2>

复制代码

  正常说组件标签书写@click应该为原生DOM事件,但是如果子组件内部通过defineEmits界说就变为自界说事件了

1.     let $emit = defineEmits(["xxx",'click']);

复制代码

3、全局事件总线（插件mitt）

   全局事件总线可以实现任意组件通信，在vue2中可以根据VM与VC关系推出全局事件总线。
    但是在vue3中没有Vue构造函数，也就没有Vue.prototype.以及组合式API写法没有this，
    那么在Vue3想实现全局事件的总线功能就有点不现实啦，如果想在Vue3中使用全局事件总线功能
    可以使用插件mitt实现。
  mitt:官网地点:https://www.npmjs.com/package/mitt
4、v-model

   v-model指令但是收集表单数据(数据双向绑定)，除此之外它也可以实现父子组件数据同步。
    而v-model实指利用props[modelValue]与自界说事件[update:modelValue]实现的。
    下方代码:相当于给组件Child传递一个props(modelValue)与绑定一个自界说事件update:modelValue
实现父子组件数据同步

1.     <Child v-model="msg"></Child>

复制代码

  在vue3中一个组件可以通过使用多个v-model,让父子组件多个数据同步,下方代码相当于给组件Child传递两个props分别是pageNo与pageSize，以及绑定两个自界说事件update:pageNo与update:pageSize实现父子数据同步

1.     <Child v-model:pageNo="msg" v-model:pageSize="msg1"></Child>

复制代码

5、useAttrs

使用vue中的useAttrs方法可以获取组件标签上的属性和事件。
两个组件分别为父组件app.vue和子组件helloworld.vue
父组件：

1. <template>
2.   <el-button type="primary" size="small" :icon="Edit"></el-button>
3.   <HelloWorld msg="我是helloword子组件" type="primary" size="small" :icon="Edit" title="你好编辑" />
4. </template>
6. <script setup lang="ts">
7.   import HelloWorld from './components/HelloWorld.vue'
9.   import {
10.     Edit,
11.     Delete
12.   } from '@element-plus/icons-vue'
13. </script>
15. <style scoped>
17. </style>

复制代码

子组件：

1. <template>
4.   <div class="card" :title="$attrs.title">
5.     <h3>{{ msg }}</h3>
6.     <el-button :="$attrs"></el-button>
7.   </div>
9. </template>
11. <script setup lang="ts">
12.   import {
13.     ref
14.   } from 'vue'
15.   import {
16.     useAttrs
17.   } from 'vue'
19.   let $attrs = useAttrs()
20.   console.log($attrs)
22.   defineProps < {
23.     msg: string
24.   } > ()
26.   const count = ref(0)
27. </script>
29. <style scoped>
30.   .card {
31.     background-color: antiquewhite;
32.   }
34.   .read-the-docs {
35.     color: #888;
36.   }
37. </style>

复制代码

上述代码中，首先在父组件中引入子组件：

1. import HelloWorld from './components/HelloWorld.vue'

复制代码

在父组件中，子组件标签上加上所需属性：

1. <HelloWorld msg="我是helloword子组件" type="primary" size="small" :icon="Edit" title="你好编辑" />

复制代码

然后在子组件中引入vue中的useAttrs方法：

1.   import {
2.     useAttrs
3.   } from 'vue'

复制代码

useAttrs方法返回的是一个对象

1.   let $attrs = useAttrs()
2.   console.log($attrs)

复制代码

打印输出这个对象：

可以看到输出结果中，能继续到父组件标签中的属性值。
最后在子组件中属性绑定$attrs的值：

1. <el-button :="$attrs"></el-button>

复制代码

注意事项（重点）
需要注意的是：props和useAttrs方法都可以获取到父组件传过来来的属性和属性值；
但是如果一旦用prop继续了此中的某个属性和属性值，那么useAttrs就继续不到这个属性和属性值。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。