Shulou(Shulou.com)06/03 Report--

According to the example analysis of the new features of teleport in Vue3, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a simpler and easier way.

Vue encourages us to build UI by encapsulating UI and related behaviors into components. We can nest them inside another to build a constituent application UI tree.

However, sometimes part of a component template logically belongs to that component, and from a technical point of view, it is best to move this part of the template to a location other than Vue app in the DOM.

Teleport provides a clean way to control which parent node in the DOM to render the HTML without resorting to the global state or splitting it into two components.

App.component ('modal-button', {template: `Open full screen modal! (With teleport!) I'm a teleported modal! (My parent is "body") Close `, data () {return {modalOpen: false}) use with Vue compoents

If the Vue component is included, it will still be a logical child of the parent component:

Const app = Vue.createApp ({template: `Root instance`}) app.component ('parent-component', {template: `This is a parent component`}) app.component (' child-component', {props: ['name'], template: `Hello, {{name}} `}) in this case, even if child-compoents is rendered in different places, it will still be a subset of parent-component And will accept name prop from it.

This also means that the injection from the parent component works as expected, and the child components will be nested under the parent component in the Vue Devtools and deployed where the actual content is moved.

Use multiple teleport on the same target

A common use case scenario is a reusable component that may have multiple instances active at the same time. In this case, multiple components can mount their contents to the same target element. The order will be a simple append-- the later mount will be after the earlier mount in the target element.

A B A B uses to:String. Prop is required and must be a valid query selector or HTMLElement (if used in a browser environment). Specifies the target element in which the content will be moved.

Disabled: boolean . This optional attribute can be used for disabled features, which means that its slot contents will not be moved to any location. Instead, it is rendered at the location you specified in the surrounding parent component.

It is worth noting that this will move the actual DOM node instead of being destroyed and recreated, and it will also maintain

The active state of any component instance. All stateful HTML elements (that is, videos played) remain in their state.

This is the answer to the sample analysis question about the new features of teleport in Vue3. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.