资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

vue中组件有什么用-创新互联

这篇文章主要为大家展示了“vue中组件有什么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中组件有什么用”这篇文章吧。

为南乐等地区用户提供了全套网页设计制作服务,及南乐网站建设行业解决方案。主营业务为网站设计制作、网站设计、南乐网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

一、递归组件

组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了。

示例如下:

  
   
  
Vue.component('my-component19',{  name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件,全局的ID会被自动设置为组件的name。  props: {   count: {    type: Number,    default: 1   }  },  template: '
' }); var app19 = new Vue({  el: '#app19' });

渲染结果为:

 
  
   
    
   
  
 

 设置name 后,在组件模板内就可以递归使用了,不过需要注意的是,必须给一个条件来限制递归数量,否则会抛出错误: max stack size exceeded 。

组件递归使用可以用来开发一些具有未知层级关系的独立组件,比如级联选择器和树形控件等。

二、内联模板

组件的模板一般都是在template 选项内定义的, Vue 提供了一个内联模板的功能,在使用组件时,给组件标签使用inline-template 特性,组件就会把它的内容当作模板,而不是把它当内容分发,这让模板更灵活。

示例如下:     


   
    
     

在父组件中定义子组件的模板

     

{{msg}}

    
      
Vue.component('my-component20',{  data: function(){   return {    msg: '在子组件声明的数据'   }  } }); var app20 = new Vue({  el: '#app20' });

三、动态组件

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

示例如下:     


   
   切换到A
   切换到B
   切换到C
  
var app21 = new Vue({
 el: '#app21',
 data: {
  currentView: 'comA'
 },
 methods: {
  changeView: function(data){
   this.currentView = 'com'+ data  //动态地改变currentView的值就可以动态挂载组件了。
  }
 },
 components: {
  comA: {
   template: '
组件A
'   },   comB: {    template: '
组件B
'   },   comC: {    template: '
组件C
'   }  } });

 四、异步组件

当你的工程足够大, 使用的组件足够多时, 是时候考虑下性能问题了, 因为一开始把所有的组件都加载是没必要的一笔开销。

好在Vue.js 允许将组件定义为一个工厂函数,动态地解析组件。Vue. 只在组件需要渲染时触发工厂函数, 并且把结果缓存起来,用于后面的再次渲染。   

 
      
    
Vue.component('my-component22',function(resolve, reject){
  window.setTimeout(function(){
    resolve({
      template: '
我是异步渲染的
'     })   },2000) }); var app22 = new Vue({   el: '#app22' });

工厂函数接收一个resolve 回调,在收到从服务器下载的组件定义时调用。也可以调用reject( reason )指示加载失败。
这里setTimeout 只是为了演示异步,具体的下载逻辑可以自己决定,比如把组件配置写成一个对象配置,通过Ajax 来请求,然后调用resolve 传入配置选项。

以上是“vue中组件有什么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻标题:vue中组件有什么用-创新互联
当前URL:http://cdkjz.cn/article/cogjog.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220