Vue3当中props与attrs

1. props的组件传值
props选项：用props进行组件传值的时候，必须先声明props中的属性在选项对象中，例：

export default defineComponent({
  props: {
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      required: true,
    },
  }
})

在以上代码中，通过props选项声明了2个prop，它们分别为name和age。

通过v-bind绑定数据：在使用该组件的时候，需要对props中的属性进行绑定，例：

<template>
  <div id="#app">
    <Child :name="name" :age="age" :sex="sex" @click="void(0)" style="display: block"/>
  </div>
</template>
 
<script>
import Child from './components/Child'
import { ref } from 'vue'
 
export default {
  name: "App",
  setup() {
    return {
      name: ref("小红"),
      age: ref(18),
      sex: ref("女")
    }
  },
  components: {
    Child
  }
};
</script>

在以上的代码中，通过在父组件为该组件分别绑定了name，age，sex

在组件中使用prop：这里我们通过setup函数进行prop的访问

<script>
import { defineComponent } from "vue";
 
export default defineComponent({
  props: {
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      required: true,
    },
  },
  setup(prop) {
    for (let key in prop) {
      console.log(key)
    }
  },
});
</script>

在以上的代码中，将所有prop输出到控制台当中，结果如下：

从图中可以看出，name和age已经被输出到控制台 。父组件同时也绑定了sex，而控制台并没有输出sex的内容，因为在子组件props选项中没有对sex进行声明。 

2. attrs中保存的数据
我们对刚刚的代码进行一下修改

<script>
import { defineComponent } from "vue"
 
export default defineComponent({
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      required: true
    },
  },
  setup(prop, { attrs }) {
    console.log(`----------------
  this is props
-----------------`);
    for (let key in prop) {
      console.log(`${key} : ${prop[key]}`)
    }
    console.log(`----------------
  this is attrs
-----------------`);
    for (let key in attrs) {
      console.log(`${ key } : ${ attrs[key] }`)
    }
  },
})
</script>

以上代码分别输出了所有props、attrs中的数据

下面是输出的结果

 以上代码输出了props，attrs中所有的数据，从中可以看出：attrs可以获取到除了prop的其它数据，同时事件可以获取
————————————————
版权声明：本文为CSDN博主「꧁TL꧂」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42824310/article/details/119274020