DDR爱好者之家

Vue.js组件高级特性实例详解
站长资源 2024/9/21 佚名
34 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了Vue.js组件高级特性。分享给大家供大家参考，具体如下：

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: {}
});

效果：

Vue.js组件高级特性实例详解

渲染结果：

Vue.js组件高级特性实例详解

可以利用组件的可递归特性，来实现一些具有不确定层级的组件，比如级联选择器和树型组件。

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;
    }
  }
});

效果：

Vue.js组件高级特性实例详解

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) {
  window.setTimeout(function () {
    resolve({
      template:'<div>全球首个5G电话拨通</div>'
    });
  },1000);
});
var app5 = new Vue({
  el: '#app5'
});

效果：

Vue.js组件高级特性实例详解

这里使用 setTimeout 来模拟异步下载，下载成功后会调用 resolve 方法。

一般情况下，会把组件的配置定义为对象配置，然后通过 Ajax 请求组件配置信息，最后通过 resolve 传入这些配置。

完整实例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue.js组件高级特性</title>
<script src="/UploadFiles/2021-04-02/vue.min.js">


感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。


希望本文所述对大家vue.js程序设计有所帮助。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
DDR爱好者之家 Design By 杰米