Vuejs第十二篇之动态组件全面解析

什么是组件?

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

本篇资料是小编参考官方文档的基础上整理的一篇更加细致的说明,代码更多更全,非常适合新手学习。

官方文档:

http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6

动态组件介绍如下所示:

①简单来说:

就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。

②动态切换:

在挂载点使用component标签,然后使用v-bind:is=”组件名”,会自动去找匹配的组件名,如果没有,则不显示;

改变挂载的组件,只需要修改is指令的值即可。

如示例代码:

<div id="app">
<button @click="toshow">点击让子组件显示</button>
<component v-bind:is="which_to_show"></component>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
which_to_show: "first"
},
methods: {
toshow: function () { //切换组件显示
var arr = ["first", "second", "third", ""];
var index = arr.indexOf(this.which_to_show);
if (index < 3) {
this.which_to_show = arr[index + 1];
} else {
this.which_to_show = arr[0];
}
}
},
components: {
first: { //第一个子组件
template: "<div>这里是子组件1</div>"
},
second: { //第二个子组件
template: "<div>这里是子组件2</div>"
},
third: { //第三个子组件
template: "<div>这里是子组件3</div>"
},
}
});
</script> 

说明:

点击父组件的按钮,会自动切换显示某一个子组件(根据which_to_show这个变量的值来决定)。

③keep-alive

简单来说,被切换掉(非当前显示)的组件,是直接被移除了。
在父组件中查看this.$children属性,可以发现,当子组件存在时,该属性的length为1,而子组件不存在时,该属性的length是0(无法获取到子组件);

假如需要子组件在切换后,依然需要他保留在内存中,避免下次出现的时候重新渲染。那么就应该在component标签中添加keep-alive属性。

如代码:

<div id="app">
<button @click="toshow">点击让子组件显示</button>
<component v-bind:is="which_to_show" keep-alive></component>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
which_to_show: "first"
},
methods: {
toshow: function () { //切换组件显示
var arr = ["first", "second", "third", ""];
var index = arr.indexOf(this.which_to_show);
if (index < 3) {
this.which_to_show = arr[index + 1];
} else {
this.which_to_show = arr[0];
}
console.log(this.$children);
}
},
components: {
first: { //第一个子组件
template: "<div>这里是子组件1</div>"
},
second: { //第二个子组件
template: "<div>这里是子组件2</div>"
},
third: { //第三个子组件
template: "<div>这里是子组件3</div>"
},
}
});
</script> 

说明:

初始情况下,vm.$children属性中只有一个元素(first组件),点击按钮切换后,vm.$children属性中有两个元素,再次切换后,则有三个元素(三个子组件都保留在内存中)。

之后无论如何切换,将一直保持有三个元素。

④activate钩子

简单来说,他是延迟加载。

例如,在发起ajax请求时,会需要等待一些时间,假如我们需要在ajax请求完成后,再进行加载,那么就需要用到activate钩子了。

具体用法来说,activate是和template、data等属性平级的一个属性,形式是一个函数,函数里默认有一个参数,而这个参数是一个函数,执行这个函数时,才会切换组件。

为了证明他的延迟加载性,在服务器端我设置当发起某个ajax请求时,会延迟2秒才返回内容,因此,第一次切换组件2时,需要等待2秒才会成功切换:

<div id="app">
<button @click="toshow">点击让子组件显示</button>
<component v-bind:is="which_to_show"></component>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
which_to_show: "first"
},
methods: {
toshow: function () { //切换组件显示
var arr = ["first", "second", "third", ""];
var index = arr.indexOf(this.which_to_show);
if (index < 3) {
this.which_to_show = arr[index + 1];
} else {
this.which_to_show = arr[0];
}
console.log(this.$children);
}
},
components: {
first: { //第一个子组件
template: "<div>这里是子组件1</div>"
},
second: { //第二个子组件
template: "<div>这里是子组件2,这里是ajax后的内容:{{hello}}</div>",
data: function () {
return {
hello: ""
}
},
activate: function (done) { //执行这个参数时,才会切换组件
var self = this;
$.get("/test", function (data) { //这个ajax我手动在服务器端设置延迟为2000ms,因此需要等待2秒后才会切换
self.hello = data;
done(); //ajax执行成功,切换组件
})
}
},
third: { //第三个子组件
template: "<div>这里是子组件3</div>"
}
}
});
</script> 

代码效果:

【1】第一次切换到组件2时,需要等待2秒后才能显示(因为发起ajax);

【2】在有keep-alive的情况下,第二次或之后切换到组件2时,无需等待;但ajax内容,需要在第一次发起ajax两秒后才会显示;

【3】在无keep-alive的情况下(切换掉后没有保存在内存中),第二次切换到组件2时,依然需要等待。

【4】等待时,不影响再次切换(即等待组件2的时候,再次点击切换,可以直接切换到组件3);

说明:

【1】只有在第一次渲染组件时,才会执行activate,且该函数只会执行一次(在第一次组件出现的时候延迟组件出现)

【2】没有keep-alive时,每次切换组件出现都是重新渲染(因为之前隐藏时执行了destroy过程),因此会执行activate方法。

⑤transition-mode过渡模式

简单来说,动态组件切换时,让其出现动画效果。(还记不记得在过渡那一节的说明,过渡适用于动态组件)
默认是进入和退出一起完成;(可能造成进入的内容出现在退出内容的下方,这个下方指y轴方面偏下的,等退出完毕后,进入的才会出现在正确的位置);

transition-mode=”out-in”时,动画是先出后进;
transition-mode=”in-out”时,动画是先进后出(同默认情况容易出现的问题);

示例代码:(使用自定义过渡名和animate.css文件)

<div id="app">
<button @click="toshow">点击让子组件显示</button>
<component v-bind:is="which_to_show" class="animated" transition="bounce" transition-mode="out-in"></component>
</div>
<script>
Vue.transition("bounce", {
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})
var vm = new Vue({
el: '#app',
data: {
which_to_show: "first"
},
methods: {
toshow: function () { //切换组件显示
var arr = ["first", "second", "third", ""];
var index = arr.indexOf(this.which_to_show);
if (index < 3) {
this.which_to_show = arr[index + 1];
} else {
this.which_to_show = arr[0];
}
}
},
components: {
first: { //第一个子组件
template: "<div>这里是子组件1</div>"
},
second: { //第二个子组件
template: "<div>这里是子组件2,这里是ajax后的内容:{{hello}}</div>",
data: function () {
return {
hello: ""
}
}
},
third: { //第三个子组件
template: "<div>这里是子组件3</div>"
}
}
});
</script> 

以上所述是小编给大家介绍的Vuejs第十二篇之动态组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Vue.js仿微信聊天窗口展示组件功能

    源码:https://github.com/doterlin/vue-wxChat 演示地址:https://doterlin.github.io/vue-wxChat/ 运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 介绍 支持文本和图片的展示(后续将

  • Vuejs第十一篇组件之slot内容分发实例详解

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. Slot分发内容 ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如代码: <

  • Vuejs第九篇之组件作用域及props数据传递实例详解

    本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc

  • vuejs动态组件给子组件传递数据的方法详解

    通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定 <div class="app" id="deviceready"> <component :is="currentView" :user_name.s

  • Vuejs第十篇之vuejs父子组件通信

    本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件.父组件.根组件: this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例 示例代码: <div id="a

  • Vuejs第十二篇之动态组件全面解析

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 本篇资料是小编参考官方文档的基础上整理的一篇更加细致的说明,代码更多更全,非常适合新手学习. 官方文档: http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u

  • Vue动态组件实例解析

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动态组件 <div id="example"> <button @click="change">切换页面</button> <component :is="currentView"></compon

  • Vue 自定义动态组件实例详解

    现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件. 举第一个栗子 用vue-cli搭建好项目目录之后,在src/components下面新建一个文件夹放我们要写的插件,如图所示: index.vue里写我们的组件,代码如下: index.js里面写index.vue的install方法,并用Vue.component注册组件,代码如下: 接下来我们要在默认的main.js里将刚刚写的index.js

  • 基于vue2.0动态组件及render详解

    如下所示: <template> <div class="hello"> <h1>{{ msg }}</h1> <h2>这里是Boor</h2> <component v-bind:my-data="items" v-bind:is="currentView"> <!-- 组件在 vm.currentview 变化时改变! --> </compo

  • vue 动态组件(component :is) 和 dom元素限制(is)用法说明

    一.is的使用 参考Vue 2.0教程,有讲到 is 的使用: 解析 DOM 模板时的注意事项 有些 HTML 元素,诸如 <ul>.<ol>.<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的.而有些元素,诸如 <li>.<tr> 和 <option>,只能出现在其它某些特定的元素内部. 这会导致我们使用这些有约束条件的元素时遇到一些问题.例如: <table> <blog

  • Vue动态组件component标签的用法大全

    目录 简介 说明 官网网址 示例 路由设置 父组件 子组件 简介 说明 本文介绍Vue的动态组件的用法. 在Vue中,可以通过component标签的is属性动态指定标签,例如: <component :is="componentName"></component> 此时,componentName的值是什么,就会引入什么组件. 官网网址 https://v2.cn.vuejs.org/v2/guide/components.html#动态组件 示例 路由设置

  • Vue高级用法实例教程之动态组件

    目录 基础描述 AST解析 render函数 普通组件和动态组件的对比 工厂函数形式的动态组件 总结 动态组件我相信大部分在开发的过程中都会用到,当我们需要在不同的组件之间进行状态切换时,动态组件可以很好的满足我们的需求,其中的核心是component标签和is属性的使用. 基础描述 // vue <div id="app"> <button @click="changeTabs('child1')">child1</button>

  • Vue两种组件类型:递归组件和动态组件的用法

    一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> <div> <p>递归组件</p> <Recursion :count="count + 1" v-if="count < 3"></Recursion> </div> </template&g

随机推荐