Vue组件的高级用法

时间：2019-02-17 12:56:08 阅读：127 评论：0 收藏：0 [点我收藏+]

标签：内容 template com 注意 nbsp syn -- div 它的

1，递归组件

<!-- 
    递归组件: 组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可以了。
        设置那么House在组件模板内就可以递归使用了,不过需要注意的是，
        必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded

        组件递归用来开发一些具体有未知层级关系的独立组件。比如：
            联级选择器和树形控件 
    -->
  	父组件  
	<recursion:count="1"></recursion>
	  // recursion.vue 
	<recursion :count="count+1" v-if=" count< 3"></recursion>

 

2，内联模板

   <!-- 
      组件把它的内容当成模板
      父组件作用域下的数据和子组件声明的数组都可以被渲染(如果同名,优先使用子组件数据)
      注释： 如果不是特殊场景 不建议使用内联组件
    -->
    <dynamic inline-template>
      <div>
        <h3>在父组件中定义子组件的模板</h3>
        <p>{{msg}}</p>    // 子组件中的数据
        <p>{{message}}</p>
      </div>
    </dynamic> 

3，动态组件

 <!-- 
      组件把它的内容当成模板
      父组件作用域下的数据和子组件声明的数组都可以被渲染(如果同名,优先使用子组件数据)
      注释： 如果不是特殊场景 不建议使用内联组件
    -->
  <button @click="changeComponent(‘A‘)">Recursion</button>
    <button @click="changeComponent(‘B‘)">Dynamic</button>
    <button @click="changeComponent(‘C‘)">CurrentComponent</button>
    <component :is="comp"></component>
 <!-- 如果切换出去的组件保存在内存中可以使用 <keep-alive> -->

 // .js 
 methods: {
    changeComponent(val) {
      const currentComponentObj = {
        A: "Recursion",
        B: "Dynamic",
        C: "CurrentComponent"
      };
      this.comp = currentComponentObj[val];
    }
  }
、

4，异步组件

 <!--    
      工程足够大，使用组件足够多的时候，要考虑一下性能的问题了。
      没有必要把所有的组件都加载进来 
      Vue允许将组件定义为一个工厂函数，动态的解析组件的定义
      Vue只是在组件需要渲染的时才触发工厂函数并把结果缓存起来
      用于再次渲染，推荐配合webpack代码分割功能使用
    -->
 
	Vue.component("AsyncComponent", (resolve, reject) => {
  	setTimeout(() => {
   	 require(["./async-component"], resolve);
 	 }, 1000);
	});
 
	//高级异步组件
	const AsyncComponent = () => ({
  		component: import("./async-component"),
  		loading: Dynamic, // loading时渲染
  		error: Dynamic, // 出错时渲染
  		delay: 2000, // 当前组件等待时间
  		timeout: 3000 //   最长等待时间
	});

 

 

1，递归组件

Vue组件的高级用法

标签：内容 template com 注意 nbsp syn -- div 它的

原文地址：https://www.cnblogs.com/niusan/p/10390514.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行