vue组件小扩展
2019-04-24 21:42
183 查看
- 动态组件
-
动态组件就是 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
[ol]
高阶组件是一个函数, 这个函数的作用是进行组件的复用
例:
class HOC { //复用性代码 sum(){ //一万行代码 return 1+1 } init(Com){ return <Com sum = { this.sum }/> } } export default { init: HOC.init } const A = init(A) con 20000 st B = init(B)
相关文章推荐
- vue组件实现可搜索下拉框扩展
- VUE 中如何扩展组件内容
- 详解Vue2.0组件的继承与扩展
- 前端架构组件化开发系列二 (基于VUE 扩展组件)
- VUE兄弟组件传值
- vue 同级组件的通讯 使用eventBus
- vue 子组件 索引 ref
- Vue一次性简洁明了引入所有公共组件
- vue组件之间的通信
- 怎么直接中vue组件的style使用less,不是引入less
- vue基础知识总结(三)组件
- 构建可扩展的Java图表组件
- vue event bus 非父子组件间通信问题
- vue组件做选项卡效果
- vue小知识12.单元组件测试和示例
- 结合Vuex创造一个完美的vue-loading/vue-toast组件
- Vue入门之组件化开发
- vue如何划分组件
- Vue组件中data选项为什么必须是函数
- 详解vue 自定义marquee无缝滚动组件