当前位置：首页 > news >正文

重庆网站建设沛宣成都比较靠谱的seo

news 2025/7/7 20:51:21

重庆网站建设沛宣,成都比较靠谱的seo,《电子商务网站建设》,网站建设售后培训文章目录一、概念二、代码演示1、is 属性绑定已注册组件的名字2、is 属性绑定组件对象3、在动态组件上使用 keep-alive三、资料一、概念 Vue.js 提供了一个特殊的元素 ＜component> 用来动态地挂载不同的组件使用 is 属性来选择要挂载的组件。 <!-- 组件会在…

文章目录

一、概念
二、代码演示
- 1、is 属性绑定已注册组件的名字
- 2、is 属性绑定组件对象
- 3、在动态组件上使用 keep-alive
三、资料

一、概念

Vue.js 提供了一个特殊的元素 ＜component> 用来动态地挂载不同的组件使用 is 属性来选择要挂载的组件。

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中，currentTabComponent 可以包括

已注册组件的名字，或
一个组件的选项对象

二、代码演示

1、is 属性绑定已注册组件的名字

<div id="app"><button @click="changeView('A')">切换到组件A</button><button @click="changeView('B')">切换到组件B</button><button @click="changeView('C')">切换到组件C</button><component :is="currentView"></component>
</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let vm = new Vue({el: "#app",data: {currentView: 'comA'},components: {comA: {template: '<div>组件A</div>'},comB: {template: '<div>组件B</div>'},comC: {template: '<div>组件C</div>'}},methods: {changeView(component) {this.currentView = 'com' + component;}}});
</script>

效果如图所示：
在这里插入图片描述

2、is 属性绑定组件对象

<div id="app"><component :is="currentView"></component>
</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let Home = {template:'<div>我是组件</div>'}let vm = new Vue({el: "#app",data: {currentView: Home}});
</script>

3、在动态组件上使用 keep-alive

我们之前曾经在一个多标签的界面中使用 is 属性来切换不同的组件

<component v-bind:is="currentTabComponent"></component>

当在这些组件之间切换的时候，我们有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

我们来看一个案例：

在这里插入图片描述
在这个案例中，如果我们选择了一篇文章，点击 “我的” 标签，然后再切换回文章组件，是不会继续展示之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的组件实例。

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive><component v-bind:is="currentTabComponent"></component>
</keep-alive>

修改后的效果如下：

在这里插入图片描述
现在这个文章组件标签保持了它的状态 (被选中的文章) 甚至当它未被渲染时也是如此。

keep-alive 是vue的一个内置组件，主要用于保留组件状态或避免重新渲染。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

注意这个 <keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

本案例的完整代码如下，大家可以直接复制粘贴到自己本地的一个html文件来运行测试：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><style>.article {display: flex;}.left {width: 100px;border: 1px solid red;}.right {width: 200px;border: 1px solid blue;}li {cursor: pointer;}.selected {color: red;}</style>
</head>
<body><div id="app"><button @click="changeView('comA')">文章</button><button @click="changeView('comB')">我的</button><keep-alive><componet :is="currentView"></componet></keep-alive>
</div>  <template id="cpn1"><div class="article"><div class="left"><ul><li v-for="(item,index) in articles" @click="articleClick(index)":class="{selected:currentIndex === index}">{{item.name}}</li></ul></div><div class="right">{{content}}</div></div>
</template><template id="cpn2"><div><h2>我的界面</h2></div>
</template><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let comA = {template: '#cpn1',data() {return {articles: [{name: '文章1', content: '内容1'},{name: '文章2', content: '内容2'},{name: '文章3', content: '内容3'}],currentIndex: '',content: '请选择一篇文章'}},created() {console.log('文章组件被创建');},destroyed() {console.log('文章组件被销毁');},methods: {articleClick(index) {this.content = this.articles[index].content;this.currentIndex = index;}}}let comB = {template: '#cpn2'}let vm = new Vue({el: "#app",data: {currentView: 'comA'},components: {comA,comB},methods: {changeView(component) {this.currentView = component;}}});
</script>
</body>
</html>