简介：

上一篇文章我们记录了部分父子数据传递之间的方式，今天在使用中在记录几种在开发中经常用到的几种方式。

$attrs传递数据和事件

• 使用背景：

第一种：子组件中使用第三方组件，需要支持第三方组件的属性，但是有不行将所有数据重新定义一遍；

第二种：子组件中不使用某些属性，但是孙子组件需要使用到父组件中的数据，需要中间子组件进行中间传递的情况。

• 使用规则：

在子组件中可以使用$attrs或者useAttrs()来接收到props定义以外的其他参数数据和事件。

使用例子（一）：

<!-- 父组件 -->
<template>
  <div class="greetings">
    <h1 class="green">我是父组件</h1>
    <div>父组件姓名：{{ userName }}</div>

    <ChildView3 :name="userName" :code="2222" @change="userChange"/>

  </div>
</template>

<!-- 子组件 -->
<template>
  <div class="container">
    <h1 class="green">我是子组件3</h1>
    <div>name:{{ name }}</div>
    <div>code:{{ otherAttrs.code }}</div>
    <div>code:{{ $attrs.code }}</div>
  </div>
</template>
<script setup>
  
  const props = defineProps({
  name: {
    type: String,
    default: '',
  },
})


const emits = defineEmits(["userChange"])

const otherAttrs = useAttrs()
</script>

总结：从上面的例子的执行界面中我们可以看到，父组件中定义了name、code两个属性，子组件中仅仅只定义了name属性，然后code数据的输出是通过$attrs.code和useAttrs()方式来获取的。

使用例子（二）：

<!-- 父组件 -->
<template>
  <div class="greetings">
    <h1 class="green">我是父组件</h1>
    <div>父组件姓名：{{ userName }}</div>

    <ChildView3 :name="userName" :code="2222" @changeName="userChange"/>

  </div>
</template>

let userChange = (name)=>{
  userName.value = name
}

<!-- 子组件 -->
<template>
  <div class="container">
    <h1 class="green">我是子组件3</h1>
    <div>name:{{ name }}</div>
    <ChildView33 :name="name" v-bind="$attrs"/>
  </div>
</template>

const props = defineProps({
  name: {
    type: String,
    default: '',
  },
})

<!-- 孙子组件 -->
<template>
  <div class="container3">
    <h1 class="green">我是子组件33</h1>
    <div>name:{{ name }}</div>
    <div>code:{{ otherAttrs.code }}</div>
    <div>code:{{ $attrs.code }}</div>
    <button @click="handleClick">孙子组件向上传递数据</button>
  </div>
</template>


const props = defineProps({
  name: {
    type: String,
    default: '',
  },
})
const otherAttrs = useAttrs()

let handleClick = ()=>{
  // otherAttrs.changeName("改名字李四")
  emits("changeName","改名字李四")
}

执行结果：

总结：

我们可以从上面的执行结果中看到父组件中的code属性，在子组件中没有用到，但是我们通过v-bind绑定$attrs属性，将我们没有用到的数据传递到了孙子组件，这样就间接的实现了我们的跨组件的数据传递。

同时通过第二步点击时间我们也可以看到用户的姓名也修改了，这就证明了$attrs不仅只是传递了数据，同时也包含了事件的传递。

仅仅记录的是自己在项目开发中使用和想到的地方，希望大家提出宝贵意见，我们一起学习和进步。