vue dynamic component

1. Component

How to implement dynamic component rendering

vue provides a built-in <component> that is specifically used to render dynamic components.

This tag is equivalent to a placeholder, and you need to use the is attribute to specify the bound component

<button @click="comName = 'Left'">Show Left</button>

<button @click="comName = 'Right'">Show Right</button>



<div class="box">

	<!-- Render the Left component and the Right component-->

	<!-- component is built-in Vue -->

	<!-- is indicates the name of the component to be rendered-->

	<component :is="comName"></component>

</div>

<script>

	import Left from '@/compeonents/Left.vue'

	import Right from '@/components/Right.vue'



	export default {

		components:

			Left,

			Right

		},

		data() {

			return {

				//comName indicates the name of the component to be displayed comName: Left,

			}

		}

	}

</script> 

2. keep-alive

2.1 Problems

When a button plus one function is implemented in the Left component, the component is switched after the plus one operation, and then switched back

The following is a function added to Left

<div class="left-container">

	<h3>Left component----{{ count }}</h3>

	<button @click="count += 1">+1</button>

</div>

<script>

	export default {

		data(){

			return {

				count: 0

			}

		}

	}

</script>

After adding one, switch to right component, and then switch back. It is found that the data in the component has been rewritten and initialized.

View the Left component using Vue 's lifecycle

The following is the life cycle function added to Left

export default {

	created() {

		console.log('Left component is created!')

	},

	destroyed(){

		console.log('Left component is destroyed~')

	}

}

After executing the appeal operation again, the results are as follows:

Problem: When switching components, components will be destroyed and created at the same time, so each time you switch to the same component, the component object you get is not the same, and the initialization data will be overwritten

2.2 Use keep-alive to solve

The keep-alive component is also a built-in component of Vue and can be used directly

Modify the App root component as follows:

<keep-alive>

	<!-- keep-alive can cache internal components instead of destroying them -->

	<component :is="comName"></component>

</keep-alive> 

2.3Keep-alive life cycle

This lifecycle can only be used when the component uses keep-alive

deactivated is automatically triggered when the component is cached

actived is automatically triggered when the component is activated.

Add the following changes to the Left component

//When a component is created for the first time, created is triggered first, then activated

//When the component is activated, only activated will be triggered, not created

activated() {

	console.log('The component is activated, activated')

},

deactivated(){

	console.log('The component is cached, deactivated')

} 

2.4keep-alive include, exclude properties

By default, keep-alive will cache all components in component wrapped by keep-alive

How to specify the components that need to be cached:

Use include / exclude attributes, cannot be used at the same time

<keep-alive include="Left,MyRight">

	<component :is="comName"></component>

</keep-alive>

The above specifies the name of the component that needs to be cached: Note the name of the component here

In the Left component:

export default{}

In the Right component:

export default{

	//When the name attribute is provided, the name of the component is the value of the name attribute name: 'MyRight'

}

Distinguish: the relationship between the name attribute in the component and the registered name outside the component

Outside the component:

import Left '@/components/Left.vue'

components:

	Left,

}

The registered name here is only used to reference the component. If there is no name attribute in the component, name defaults to the registered name.

Inside the component:

export default{

	//When the name attribute is provided, the name of the component is the value of the name attribute name: 'MyRight'

}

name attribute is declared in the component. The name is used in the label displayed in the debugging tool, and the cache function in the label also uses the name.

This is the end of this article about vue dynamic component. For more related vue dynamic component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!