Vue.js中的内置组件component

最新推荐文章于 2024-02-08 10:28:07 发布

大口喝脉动

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量609

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/weixin_48683341/article/details/118531195

版权

Vue.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

组件 (Component) 是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。

语法：Vue.component('组件名称', { })

第1个参数是标签名称，第2个参数是一个选项对象

有一个特殊属性is ，用来决定哪个组件被渲染。

动态组件模板template

在创建组件时，需要把HTML结构放在组件模板(template)中；

组件模板内必须是单个根元素；

组件模板的内容可以是模板字符串；

例：设置一个搜索组件模板

            template: `
					<div>
						<input type="text" v-model="kw" id="inp">
						<button>搜索</button>
					</div>
				`

keep-alive内置组件

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

include => 指定要缓存的组件名称
exclude => 指定不要缓存的组件名称
max => 最大缓存数量(原理：使用队列的数据结构)

下面我们通过写一个搜索案例来应用一下。

<body>
		<div id="app">
			
			<div>
				<button @click="com = 'comA'">comA</button>
				<button @click="com = 'comB'">comB</button>
				<button @click="com = 'comC'">comC</button>
			</div>
			
			<!-- 动态组件 -->
			<keep-alive  max="2">
				<component :is="com"></component>
			</keep-alive>
			
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			//自定义组件
			Vue.component('comA', {
				template: `
					<div>comA 组件</div>
				`,
				beforeCreate(){
					console.log('comA...beforeCreate...')
				},
				created() {
					console.log('comA...created...')
				},
				beforeMount() {
					console.log('comA...beforeMount...')
				},
				mounted() {
					console.log('comA...mounted...')
				}
			})
			
			Vue.component('comB', {
				template: `
					<div>comB 组件</div>
				`,
				beforeCreate(){
					console.log('comB...beforeCreate...')
				},
				created() {
					console.log('comB...created...')
				},
				beforeMount() {
					console.log('comB...beforeMount...')
				},
				mounted() {
					console.log('comB...mounted...')
				}
			})
			
			Vue.component('comC', {
				template: `
					<div>comC 组件</div>
				`,
				beforeCreate(){
					console.log('comC...beforeCreate...')
				},
				created() {
					console.log('comC...created...')
				},
				beforeMount() {
					console.log('comC...beforeMount...')
				},
				mounted() {
					console.log('comC...mounted...')
				}
			})
			
			new Vue({
				el: '#app',
				data:{
					com: 'comA'
				}
			})
		</script>
	</body>