vue 组件高级进阶使用-js教程-PHP中文网

vue 组件高级进阶使用

php中世界最好的语言

发布： 2018-05-25 14:06:04

原创

2060人浏览过

这次给大家带来vue 组件高级进阶使用，vue 组件高级进阶使用的注意事项有哪些，下面就是实战案例，一起来看一下。

一、递归组件

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

示例如下：

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

登录后复制

渲染结果为：

 <p id="app19">
  <p>
   <p>
    <p><!----></p>
   </p>
  </p>
 </p>

登录后复制

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

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

二、内联模板

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

示例如下：

<p id="app20">
   <my-component20 inline-template>
    <p>
     <h3>在父组件中定义子组件的模板</h3>
     <p>{{msg}}</p>
    </p>
   </my-component20>
  </p>
Vue.component('my-component20',{
 data: function(){
  return {
   msg: '在子组件声明的数据'
  }
 }
});
var app20 = new Vue({
 el: '#app20'
});

登录后复制

三、动态组件

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

示例如下：

<p id="app21">
   <component :is="currentView"></component>
   <button @click="changeView('A')">切换到A</button>
   <button @click="changeView('B')">切换到B</button>
   <button @click="changeView('C')">切换到C</button>
  </p>
var app21 = new Vue({
 el: '#app21',
 data: {
  currentView: 'comA'
 },
 methods: {
  changeView: function(data){
   this.currentView = 'com'+ data　　//动态地改变currentView的值就可以动态挂载组件了。
  }
 },
 components: {
  comA: {
   template: '<p>组件A</p>'
  },
  comB: {
   template: '<p>组件B</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>'
  },
  comC: {
   template: '<p>组件C</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11146">
                            <img src="https://img.php.cn/upload/webcode/000/000/002/176511060312813.png" alt="mallcloud商城">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11146">mallcloud商城</a>
                            <p>mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="mallcloud商城">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11146" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="mallcloud商城">
                        </a>
                    </div>
                '
  }
 }
});

登录后复制

四、异步组件

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

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

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

登录后复制

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！