Shulou(Shulou.com)05/31 Report--

Today, Xiaobian will share with you the relevant knowledge points on how to use vue3 $attrs and inheritAttrs. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you will gain something after reading this article. Let's find out together.

$attrs and inheritAttrs Usage

$attrs attribute interpretation: Contains attribute bindings and events that are not component props or custom events in the parent scope. When a component does not declare any props, it contains all parent scope bindings and can be passed into internal components via v-bind="$attrs"--useful when creating higher-order components.

inheritAttrs attribute explanation: If you do not want the root element of the component to inherit attributes, you can set inheritAttrs: false in the component's options

It may not be easy to understand, but we can give an example to prove it.

In parent component app.vue import MyInput from "@/components/myInput.vue";import { reactive } from "vue";const state = reactive({ text: "", pass: "",}); subassembly myInput.vue sets inheritAttrs: true (default) export default { props: { modelValue: [String, Number], },};

Subcomponent myInput.vue setting inheritAttrs: false export default { inheritAttrs: false, props: { modelValue: [String, Number], },};

小结：

由上述例子可以看出，子组件的props中未注册父组件传递过来的属性。

当设置inheritAttrs:true时，子组件的顶层标签元素中会渲染出父组件传递过来的属性(例如:type="text"等)

当设置inheritAttrs: false时，子组件的顶层标签元素中不会渲染出父组件传递过来的属性

不管inheritAttrs为true或者false，子组件中都能通过$attrs属性获取到父组件中传递过来的属性。

$attrs和inheritAttrs实例

官网的文档简短而又不清晰，实在是看不懂，只好自己找代码验证来看看是什么意思：

Document const app = Vue.createApp({ data() { return {} },})app.component('father', { // inheritAttrs: false, props: ['v1'], template: `

v1 is {{v1}}

`, created() { console.log('father:', this.$attrs) }})app.component('son', { // inheritAttrs: false, props: ['v2'], template: `

v2 is {{v2}}

`, created() { console.log('son:', this.$attrs) }})app.component('grandSon', { props: ['v3'], template: `

v3 is {{v3}}

`, created() { console.log('grandSon:', this.$attrs) }})app.mount('#app')

页面显示的结果：

v1 is value1

v2 is value2

v3 is value3

页面源代码：

v1 is value1

v2 is value2

v3 is value3

控制台打印是当前组件的$attrs：

father: Proxy {v2: "value2", v3: "value3", __vInternal: 1}

son: Proxy {v3: "value3", some: 1, __vInternal: 1}

grandSon: Proxy {some: 1, __vInternal: 1}

首选，father组件被传入了3个值，但是实际使用props接收的只有v1,v2和v3作为attributes在DOM里面渲染了。

The devtool above can also be explained, and the console can also be proved at the same time.

Also the son component simply receives v2 as prop:

grandSon component just receives v3 as prop

father prop:v1,attributes: v2,v3

son prop:v2 ,attributes:v3,some

grandSon prop:v3,,attributes: some

Find that whether the three values v1,v2,v3 or son are passed in by father and the value ':some= 1',

As long as the prop is not passed to the next level component, then it must be the $attrs of the next level component, that is, the value that is not passed as prop will be passed to the next component as a member of attrs. A component's attrs are a combination of what is passed in by the parent component and what comes with it.

The above is $attrs, then inheritAttrs is attrs inheritance, where inheritance is to control DOM rendering, not inheritance is not rendering, but the actual existence of this attrs.

The inheritAttrs attribute defaults to true, so as you can see above, attrs will be passed down, and when set to false, attrs inherited from the previous layer will not be rendered in the DOM.

Change the code:

app.component('father', { inheritAttrs: false, //not inherited props: ['v1'], template: `

v1 is {{v1}}

`, created() { console.log('father:', this.$ attrs) }})

father component this does not inherit attrs, console print unchanged:

father: Proxy {v2: "value2", v3: "value3", __vInternal: 1}

son: Proxy {v3: "value3", some: 1, __vInternal: 1}

grandSon: Proxy {some: 1, __vInternal: 1}

Devtool can still see attrs here

But look at the source code:

v1 is value1

v2 is value2

v3 is value3

The v2 and v3 attrs in DOM rendering are no longer present.

The above is all the content of "vue3 $attrs and inheritAttrs", thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.