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

1、使用defineProps

父组件给子组件传递数据

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

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

    let props = defineProps({
      info:{
       type:String,//接受的数据类型
       default:'默认参数',//接受默认数据
      },
      money:{
       type:Number,
       default:0
    }})

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

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

2、使用defineEmits接受自定义事件

2.1原生DOM事件

代码如下:

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

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

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

2.2自定义事件

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

    <template>
      <div>
        <h1>我是子组件2</h1>
        <button @click="handler">点击我触发xxx自定义事件</button>
      </div>
    </template>
    
    <script setup lang="ts">
    let $emit = defineEmits(["xxx"]);
    const handler = () => {
      $emit("xxx", "法拉利", "茅台");
    };
    </script>
    <style scoped>
    </style>

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

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

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

mitt:官网地址:https://www.npmjs.com/package/mitt

4、v-model

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

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

5、useAttrs

使用vue中的useAttrs方法可以获取组件标签上的属性和事件。

两个组件分别为父组件app.vue和子组件helloworld.vue

父组件：

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

<script setup lang="ts">
  import HelloWorld from './components/HelloWorld.vue'
  import {
    Edit,
    Delete
  } from '@element-plus/icons-vue'
</script>

<style scoped>

</style>

子组件：

<template>


  <div class="card" :title="$attrs.title">
    <h3>{{ msg }}</h3>
    <el-button :="$attrs"></el-button>
  </div>

</template>

<script setup lang="ts">
  import {
    ref
  } from 'vue'
  import {
    useAttrs
  } from 'vue'

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

  defineProps < {
    msg: string
  } > ()

  const count = ref(0)
</script>

<style scoped>
  .card {
    background-color: antiquewhite;
  }

  .read-the-docs {
    color: #888;
  }
</style>

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

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

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

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

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

  import {
    useAttrs
  } from 'vue'

useAttrs方法返回的是一个对象

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

打印输出这个对象：
Vue3通信方式之defineProps、defineEmits、useAttrs、插件mitt和v-model-LMLPHP
可以看到输出结果中，能接受到父组件标签中的属性值。

最后在子组件中属性绑定$attrs的值：

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

注意事项（重点）

需要注意的是：props和useAttrs方法都可以获取到父组件传过来来的属性和属性值；
但是如果一旦用prop接受了其中的某个属性和属性值，那么useAttrs就接受不到这个属性和属性值。

hhzz