1 递归
为组件设置 name 属性, 这个组件就可以在自身的模板内递归调用自己.
html:
- <div id="app">
- <deniro-component :count="1"></deniro-component>
- </div>
JS:
- vue.component('deniro-component',{
- name:'deniro-component',
- props:{
- count:{
- type:Number,
- default:1
- }
- },
- template:'\
- <div class="child">\
- <p>{{count}} 微信大变样! 看了这些新功能后, 网友淡定不住了 </p>\
- <deniro-component\
- :count="count + 1"\
- v-if="count <3"></deniro-component>\
- </div>\
- '
- });
- var App = new Vue({
- el: '#app',
- data: {}
- });
效果:
渲染结果:
可以利用组件的可递归特性, 来实现一些具有不确定层级的组件, 比如级联选择器和树型组件.
2 内联模板
一般情况下, 组件的模板都是在 template 中定义的. 我们也可以在组件标签中加上 inline-template 属性, 这样组件就会把它的内容作为实际的模板内容.
内联模板可以接收父, 子组件中声明的数据, 所以更加灵活.
HTML:
- <div id="app2">
- <deniro-component2 inline-template>
- <div>
- <h2 > 父组件中定义子组件模板 </h2>
- <p>{{content1}}</p>
- <p>{{content2}}</p>
- </div>
- </deniro-component2>
- </div>
JS:
- Vue.component('deniro-component2',{
- data:function () {
- return {
- content1:'双屏手机一碰就碎? 实测结果意外 (来源于子组件)'
- }
- }
- });
- var app2 = new Vue({
- el: '#app2',
- data: {
- content2:'AI 正在改变所有行业 咖啡也将被消灭 (来源于父组件)'
- }
- });
渲染结果:
- <div id="app2">
- <div>
- <h2 > 父组件中定义子组件模板 </h2>
- <p > 双屏手机一碰就碎? 实测结果意外 (来源于子组件)</p>
- <p>AI 正在改变所有行业 咖啡也将被消灭 (来源于父组件)</p>
- </div>
- </div>
如果父子组件定义的数据同名, 那么优先使用子组件中的数据.
因为作用域较难理解, 所以除非必要, 否则不建议使用.
3 动态加载
我们可以使用 is 来实现动态挂载组件.
HTML:
- <div id="app3">
- <deniro-component3 :is="currentView"></deniro-component3>
- <button @click="change('A')"> 切换到 A 组件 </button>
- <button @click="change('B')"> 切换到 B 组件 </button>
- <button @click="change('C')"> 切换到 C 组件 </button>
- </div>
JS:
- var app3 = new Vue({
- el: '#app3',
- components: {
- componentA: {
- template: '<div > 组件 A</div>'
- },
- componentB: {
- template: '<div > 组件 B</div>'
- },
- componentC: {
- template: '<div > 组件 C</div>'
- }
- },
- data: {
- currentView: 'componentA'
- },
- methods: {
- change: function (component) {
- this.currentView = 'component' + component;
- }
- }
- });
效果:
data 中的 is 变量也可以直接绑定组件对象.
HTML:
- <div id="app4">
- <deniro-component4 :is="currentView"></deniro-component4>
- </div>
JS:
- var news={
- template:'<p > 无人机送快递 渐行渐近 </p>'
- }
- var app4 = new Vue({
- el: '#app4',
- data: {
- currentView: news
- }
- });
渲染结果:
- <div id="app4">
- <p > 无人机送快递 渐行渐近 </p>
- </div>
4 异步加载
当工程变得越来越大时, 就需要考虑性能喽. 我们可以把组件定义成一个工厂函数, 实现组件动态解析. vue.js 会把本次渲染后的结果缓存起来, 从而提高性能.
HTML:
- <div id="app5">
- <deniro-component5></deniro-component5>
- </div>
JS:
- Vue.component('deniro-component5', function (resolve,reject) {
- Windows.setTimeout(function () {
- resolve({
- template:'<div > 全球首个 5G 电话拨通 </div>'
- });
- },1000);
- });
- var app5 = new Vue({
- el: '#app5'
- });
效果:
这里使用 setTimeout 来模拟异步下载, 下载成功后会调用 resolve 方法.
一般情况下, 会把组件的配置定义为对象配置, 然后通过 Ajax 请求组件配置信息, 最后通过 resolve 传入这些配置.
本文示例代码 https://jsfiddle.net/deniro/zj8v37au/
来源: http://www.jianshu.com/p/3d77a01af56b