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

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

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

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

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

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

<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']);

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

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

<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="你好编辑" />

import {    useAttrs  } from 'vue'

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

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