扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >Vue.js组件高级特性有哪些用法
  • 531

0
分享到

Vue.js组件高级特性有哪些用法

2024-04-02 19:04:59 531人浏览 安东尼
摘要

这篇文章主要介绍了vue.js组件高级特性有哪些用法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：1 递归为组件设置 name属性

这篇文章主要介绍了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>
      <h3>父组件中定义子组件模板</h3>
      <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>
  <h3>父组件中定义子组件模板</h3>
  <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="https://cdn.bootCSS.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
<div id="app">
  <deniro-component :count="1"></deniro-component>
</div>
<div id="app2">
  <deniro-component2 inline-template>
    <div>
      <h3>父组件中定义子组件模板</h3>
      <p>{{content1}}</p>
      <p>{{content2}}</p>
    </div>
  </deniro-component2>
</div>
<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>
<div id="app4">
  <deniro-component4 :is="currentView"></deniro-component4>
</div>
<div id="app5">
  <deniro-component5></deniro-component5>
</div>
<script>
Vue.component('deniro-component5', function (resolve,reject) {
    window.setTimeout(function () {
      resolve({
        template:'<div>全球首个5G电话拨通</div>'
      });
    },1000);
  });
  var app5 = new Vue({
    el: '#app5'
  });
  var news={
    template:'<p>无人机送快递 渐行渐近</p>'
  }
  var app4 = new Vue({
    el: '#app4',
    data: {
      currentView: news
    }
  });
  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.component('deniro-component2', {
    data: function () {
      return {
        content1: '双屏手机一碰就碎？实测结果意外（来源于子组件）'
      }
    }
  });
  var app2 = new Vue({
    el: '#app2',
    data: {
      content2: 'AI正在改变所有行业 咖啡也将被消灭（来源于父组件）'
    }
  });
  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: {}
  });
</script>
</body>
</html>

感谢你能够认真阅读完这篇文章，希望小编分享的“Vue.js组件高级特性有哪些用法”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网VUE频道，更多相关知识等着你来学习!

--结束END--

本文标题: Vue.js组件高级特性有哪些用法

本文链接: https://lsjlt.com/news/73523.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue.js组件高级特性有哪些用法
    这篇文章主要介绍了Vue.js组件高级特性有哪些用法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：1 递归为组件设置 name属性...
    99+
    2024-04-02
  • LINQ高级特性有哪些
    这篇文章将为大家详细讲解有关LINQ高级特性有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。LINQ高级特性之动态查询有这样一个场景：应用程序可能会提供一个用户界面，用户可以使用该用户界面指定一个或多...
    99+
    2023-06-17
  • Java高级特性有哪些
    本篇内容介绍了“Java高级特性有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1List和SetJUC(java.util.concu...
    99+
    2023-06-19
  • Python高级特性有哪些
    本篇内容介绍了“Python高级特性有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！　　切片　　可以对list, tuple, stri...
    99+
    2023-06-01
  • redis的高级特性有哪些
    这篇文章主要介绍了redis的高级特性有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。Redis（Remote Dictionary S...
    99+
    2024-04-02
  • MySQL高级特性都有哪些
    今天就跟大家聊聊有关MySQL高级特性都有哪些，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。概述闲来无事，看了下高性能mysql这本书，其中的一些M...
    99+
    2024-04-02
  • Vue.js 3.0的新特性有哪些
    这篇文章主要讲解了“Vue.js 3.0的新特性有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue.js 3.0的新特性有哪些”吧！1. 初始化项目...
    99+
    2024-04-02
  • python3函数的高级特性有哪些
    本篇文章给大家分享的是有关python3函数的高级特性有哪些，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。python有哪些常用库python常用的库：1.requesuts；...
    99+
    2023-06-14
  • 数组reduce高级用法有哪些
    本篇内容介绍了“数组reduce高级用法有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！背景reduc...
    99+
    2024-04-02
  • Vue.js中高级面试题有哪些
    小编给大家分享一下Vue.js中高级面试题有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Vue-loader 是 Webp...
    99+
    2024-04-02
  • python3中函数的高级特性有哪些
    python3中函数的高级特性有哪些？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。Python主要用来做什么Python主要应用于：1、Web开发；2、数据科学...
    99+
    2023-06-14
  • javascript数组reduce高级用法有哪些
    本篇内容介绍了“javascript数组reduce高级用法有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有...
    99+
    2024-04-02
  • Git高级用法有哪些
    本篇内容主要讲解“Git高级用法有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Git高级用法有哪些”吧!导航 &mdash;&mdash;...
    99+
    2024-04-02
  • CSS3高级属性有哪些
    这篇文章将为大家详细讲解有关CSS3高级属性有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 CSS3多列属性有很多，我们一一来介绍一下，包括以下几个属性： 1、...
    99+
    2024-04-02
  • Python的高级用法有哪些
    本篇内容主要讲解“Python的高级用法有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Python的高级用法有哪些”吧!Lambda 函数Lambda 函数是一种比较小的匿名函数&...
    99+
    2023-06-16
  • gojs的高级用法有哪些
    本篇内容主要讲解“gojs的高级用法有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“gojs的高级用法有哪些”吧!1. 取消更新动画问题：更新数据的时候，会触发渲染，有渲染动画，用户体验不好...
    99+
    2023-06-22
  • Python的高级特征都有哪些呢
    这篇文章给大家介绍Python的高级特征都有哪些呢，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。Python 多好用不用多说，大家看看自己用的语言就知道了。但是 Python 隐藏的高级功能你都 get 了吗本文中，作...
    99+
    2023-06-16
  • javascript的高级特性实例用法
    本篇内容主要讲解“javascript的高级特性实例用法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript的高级特性实例用法”吧!js中没有cl...
    99+
    2024-04-02
  • kotlin语法特性有哪些
    这篇文章给大家分享的是有关kotlin语法特性有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 Google I/O 2017 开发者大会中，Google 宣布正式...
    99+
    2024-04-02
  • Vim高级使用方法有哪些
    这篇文章主要介绍了Vim高级使用方法有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vim高级使用方法有哪些文章都会有所收获，下面我们一起来看看吧。你会发现，使用 Vim 非常方便的的场景几乎总是涉及到运行...
    99+
    2023-06-27
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作