This post was originally posted on lijing0906.github. IO

Recently, in my spare time, I was browsing the official document of vue.js. When I saw the matters to be noted when dynamic components and DOM template parsing, I mentioned a special IS feature. I felt it was very interesting, so I wrote a summary of my own understanding.

The scene

Write chestnut practice

In fact, after reading, is actually a little meng, these two have what difference, how to use it?

Careful analysis, not so difficult to understand, refer to this blog, we also write a chestnut to try

We usually use local registration more often, so I will write a local registration component.

Replace some of the content to see the render result

  1. ComponentA =”componentB”; is=”componentA”; is=”componentB”

    Here we can find that, although the tag is < componetA>, but does not show the content of componentA, but shows the content of componentB, indicating that vue is to detect the is feature when rendering the content of the component, if there is a value is assigned to render the content of the corresponding component, if there is no is feature, Then render the component content corresponding to the tag. So if < componetA> with < div>, < p> and other W3C compliant tags can normally display is assigned to the content of the component! Thus withConsiderations when parsing DOM templatesA coincidence!

  2. ComponentB = componentB (); componentB = componentB; Chestnut is bound to two, so whatever the value of two is that componentB renders.

    Also, if you replace < componetB> with < div>, < p>, etc., the w3C-compliant tags will display normally: is the content of the assigned component! This is theDynamic components!

The last

Cite chestnut practice analysis, finally understand some, sum up:

  • Similarities: Both can achieve the effect of dynamic components
  • Differences: : IS is a data binding. The value of the binding must be defined in data. The value assigned to is must be the name of the child component