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

This article editor for you to introduce in detail "vue $attrs how to use", the content is detailed, the steps are clear, the details are handled properly, I hope this "vue $attrs how to use" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

The use of vue for $attrs

Attrs was added above version 2.40 of vue.

There are multi-tier components in the project that can use $attrs to make the code more beautiful, more concise, and more convenient to maintain the code. If you use ordinary parent-child components to pass parameters prop and $emit,$on will be very cumbersome; if you use vuex will be overkill, only used in these components, there is no need to use vuex; to use the event bus eventBus, if used improperly, events may be executed multiple times.

If the data passed to the component is not received by the component using props, then the data will be used as features of the HTML element of the component, which are bound to the HTML root element of the component

InheritAttrs: false means that you do not want the root element of this component to inherit the attribute of the parent component, and the attributes passed by the parent component (no attributes received by the props of the child component) will not be displayed on the dom element of the child component, but unused registration attributes can be obtained in the component through its $attrs. ``false` does not affect the binding of style and class.

Here is an example of the use of $attrs

The list row data of the parent component is passed to the grandchild component for display

1. Parent component (Father.vue)

Associate data to the subcomponent. If the subcomponent is not received by props, then the data is applied to the root element of the subcomponent as an ordinary HTML feature.

Pass import ChildView from'. / Child.vue'export default {components: {ChildView}, data () {return {isOpen: false, row: {}, list: [{name: 'Wang Li', study: 'Java'}, {name:' Li', study: 'Python'}]}} Methods: {/ / pass event transmitClick (row) {this.isOpen = true This.row = row} 2. Son component (Child.vue)

The middle layer, which acts as the delivery intermediary between the parent component and the grandchild component, adds the vmurbind = "$attrs" to the grandchild component in the child component so that the grandchild component can receive the data

Son component

Import GrandChild from'. / GrandChild.vue'export default {/ / inherits the contents of all parent components inheritAttrs: true, components: {GrandChild}, data () {return {}}. Child-view {margin: 20px border: 2px solid red padding: 20px} 3. Grandson component (GrandChild.vue)

Be sure to use props to receive data passed from the parent component in the grandchild component

Sun Tzu component

Data passed to the grandchild component: {{row.name}} {{row.name! = = undefined? 'Learning':'} {{row.study}}

Export default {/ / does not want to inherit all the contents of the parent component, nor does it display the attribute inheritAttrs: false on the component root element dom. / / you need to receive the data passed from the parent component in this component. Note that the parameter name in props cannot be changed. The same props must be passed as the parent component: {isShow: {type: Boolean, dedault: false}, row: {type: Object, dedault: () = > {} .grand-child-view {border: 2px solid green padding: 20px margin: 20px}

Results:

As mentioned above, if the data passed to the subcomponent is not received by the subcomponent using props, then the data will be used as a feature of the subcomponent, which is bound to the HTML root element of the component. After the vue2.40 version, you can control whether these features are displayed on the dom element by inheritAttrs = false.

For example, the row and isShow passed by the parent component to the child component in the case are not received by the child component using props, and these two data are directly used as the special properties of HTML.

If the subcomponent uses inheritAttrs = true, then the property is displayed on the dom, and if set to false, the property is not displayed on the dom

What on earth is $attrs? First, let's take a look at the definition given by the official documentation.

Contains attribute bindings in the parent scope that are not recognized (and obtained) as prop (except class and style). When a component does not declare any prop, it contains bindings for all parent scopes (except class and style), and internal components can be passed in via vClure bind = "$attrs"-- useful when creating high-level components.

Now that you're here, read on!

Since it has something to do with data transfer between components, without saying much, go directly to Chestnut:

Parent: {{msg}} let vm = new Vue ({el:'# app', data: {msg: 'baseDom'}, / / use props to receive components: {' son-component': {props: ['msg'], template: `son: ` Components: {'grandson-component': {props: [' msg'], template: `Grandson: {{msg}} `}})

Call son-component within the root component and bind the variable msg in the root component data

At this point, the son-component can receive the msg of the root component by defining the props.

Then define the grandson-component component in son-component and bind msg

At this point, grandson-component can receive the msg of the son-component component by defining the props.

Looking at the component code carefully, it is found that msg only plays a transmission role in the son-component component.

Is there any other way to solve the problem of value redundancy? Don't ask, just ask.

Let vm = new Vue ({el:'# app', data: {msg: 'baseDom'}, / / use $attrs to receive components: {' son-component': {/ / props: [/ / 'msg' / /], template: `son: ` Components: {'grandson-component': {props: [' msg'], template: `Grandson: {{msg}} `}})

First, the msg of the root component is no longer received in son-component

Son-component component calls grandson-component component to bind the protagonist $attrs

You can receive the root component msg.

Read here, this "vue $attrs how to use" article has been introduced, want to grasp the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow 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.