Vue两种组件类型:递归组件和动态组件的用法
141 浏览量
2020-10-14
23:45:01
上传
评论
收藏 57KB PDF 举报
Vue两种组件类型两种组件类型:递归组件和动态组件的用法递归组件和动态组件的用法
主要介绍了Vue两种组件类型:递归组件和动态组件的用法说明，具有很好的参考价值，希望对大家有所帮助。
一起跟随小编过来看看吧
一递归组件一递归组件
递归组件的特性就是可以在自己的template模板中调用自己本身。值得注意的它必须设置name属性。
// 递归组件 recursive.vue
<template>
<div>
<p>递归组件</p>
<Recursion :count="count + 1" v-if="count < 3"></Recursion>
</div>
</template>
<script>
export default {
name: "Recursion",//必须设置name属性
props: {
count: {
type: Number,
default: 1
}
}
}
</script>
这个例子中父页面使用该递归组件会调用三次recursive组件，值得注意的是递归组件必须设置递归次数限制数量
否则会抛出错误，该例子中通过count来限制递归次数。
二二 动态组件动态组件
如果将一个Vue组件命名为Component会报错，因为Vue提供来特殊的元素<component>来动态挂载不同组件。
并使用is特性来选择要挂载的组件。
// parentComponent.vue
<template>
<div>
<h1>父组件</h1>
<component :is="currentView"></component>
<button @click = "changeToViewB">切换到B视图</button>
</div>
</template>
<script>
import ComponentA from '@/components/ComponentA'
import ComponentB from '@/components/ComponentB'
export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
currentView: ComponentA // 默认显示组件 A
}
},
methods: {
changeToViewB () {
this.currentView = ComponentB // 切换到组件 B
}
}
}
</script>
通过改变currentView的值就可以动态切换显示的组件，与之类似的是vue-router的实现原理，前端路由到不同的页面实际上就
是加载不同的组件。
补充知识：补充知识：Vue route部分简单高级用法部分简单高级用法
一、改变页面一、改变页面title的值的值
在开发时常常需要在切换到不同页面时改变浏览器的title值，那么我们就可以在定义路由的时候通过配置 meta 属性
评论0
最新资源