vue组件小扩展

最新推荐文章于 2024-01-21 23:43:47 发布

qq_39142654

最新推荐文章于 2024-01-21 23:43:47 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/qq_39142654/article/details/89503632

版权

动态组件
- 动态组件就是 component组件，组件身上可以绑定一个is属性，用来表示某一个组件
  例：

<div id="app">
    <keep-alive>
      <component is = "B"></component>
    </keep-alive>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    components: {
      "A": {
        template: '<div> A </div>'
      },
      "B": {
        template: '<div> B </div>'
      }
    }
  })
</script>

动态属性切换

<body>
    <div id="app">
        <button @click='type=type==="A" ? "B": "A"'>切换</button>
        <component :is="type"></component>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            type: 'B'
        },
        components: {
            "A": {
                template: '<div>A</div>'
            },
            "B": {
                template: '<div>B</div>'
            }
        }

    })
</script>

is属性
- 我们html中有一些标签是规定它的直接子元素的，比如 ul li ol li selector option table这类型标签
- 不能直接用常规的组件使用方式，必须在对应直接子元素上绑定 is属性

  <div id="app">
    <table>
      <tr>
        <td>aa</td>
        <td>bb</td>
        <td>cc</td>
      </tr>
      <!-- is = 组件名称 -->
      <tr is = 'my-table'></tr>
    </table>
  </div>

keep-alive组件
将组件的内容存在浏览器缓存中，当我们需要重复渲染的时候，就从浏览器缓存中去调用，这样可以减少性能消耗

  <keep-alive>
    <component is = "A"></component>
  </keep-alive>

不常用指令
- v-text vs v-html
  - 都是用来将数据插入DOM中，但是v-html可以解析标签类型数据
- v-cloak 解决 {{}} 语法短暂原样输出
- v-pre 原样输出
- v-once 只渲染一次
异步组件
- 异步组件也是一个函数，只不过这个函数使用Promise,函数有一个返回值
  例：

<body>
    <div id="app">
        <jia_async></jia_async>
    </div>

</body>
<script>
    var result = new Promise(function(resolve, reject) {
        resolve({
            template: '<div> 异步组件 </div>'
        })
    })
    Vue.component('jia_async', async() => {
        const tpl = await result.then(res => res)
        return tpl
    })

    new Vue({
        el: '#app',
    })
</script>

高阶组件(HOC) higt order component
1. 高阶组件是一个函数，这个函数的作用是进行组件的复用
  例：

class HOC {
  //复用性代码
  sum(){
    //一万行代码
    return 1+1
  }
  init(Com){
    return <Com sum = { this.sum }/>
  }
}

export default {
  init: HOC.init
}


const A = init(A)
const B = init(B)