电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

vue 動態(tài)組件(component :is) 和 dom元素限制(is)用法說明

瀏覽:97日期:2022-11-28 14:38:50

一、is的使用

參考Vue 2.0教程,有講到 is 的使用:

解析 DOM 模板時的注意事項

有些 HTML 元素,諸如 <ul>、<ol>、<table> 和 <select>,對于哪些元素可以出現(xiàn)在其內(nèi)部是有嚴(yán)格限制的。而有些元素,諸如 <li>、<tr> 和 <option>,只能出現(xiàn)在其它某些特定的元素內(nèi)部。

這會導(dǎo)致我們使用這些有約束條件的元素時遇到一些問題。例如:

<table> <blog-post-row></blog-post-row></table>

這個自定義組件 <blog-post-row> 會被作為無效的內(nèi)容提升到外部,并導(dǎo)致最終渲染結(jié)果出錯。幸好這個特殊的 is 特性給了我們一個變通的辦法:

<table> <tr is='blog-post-row'></tr></table>

可以看出,is提供了一個途徑,讓我們用自定義組件,替換其他的HTML元素。使用時只需加上屬性 is='自定義組件名'。

在這種為了解除dom元素限制,自由渲染自定義組件的場景下,僅需渲染一次,所以is的值寫死為自定義組件的名稱就可以了。

另外有些交互場景,是需要動態(tài)切換視圖組件的。

二、動態(tài)組件 :is的使用

上面講了利用is講元素替換為自定義組件的用法。

若某個數(shù)據(jù)結(jié)構(gòu)對應(yīng)的HTML視圖要求根據(jù)請求數(shù)據(jù)內(nèi)容或者用戶的選擇,來渲染出不同的視圖,就需要我們進(jìn)行動態(tài)渲染。

比如:獲取了后臺的表格數(shù)據(jù),可以根據(jù)用戶的選擇切換渲染成表單展示還是列表展示。

vue 動態(tài)組件(component :is) 和 dom元素限制(is)用法說明

此時可以將is的值綁定為一個變量,is就變成了v-bind:is='變量名',即 :is='變量名'。當(dāng)變量名賦值為哪個自定義組件名時,擁有:is=“變量名”屬性的元素就會渲染為哪個組件。由于is的值不再是一章節(jié)中的靜態(tài)的值,而是進(jìn)行了數(shù)據(jù)綁定,所以綁定的變量要在data中定義過的。

動態(tài)組件的使用場景往往比第一章的解除dom元素限制的場景要復(fù)雜一點。雖然is屬性在常用的HTML元素上都可以使用的,但常見的解除dom元素限制的場景使用元素一般為<li><option>等。vue為動態(tài)組件的使用場景提供了<component>元素。

若要在切換中緩存保留動態(tài)渲染組件的狀態(tài),可以用<keep-alive>元素將動態(tài)組件包裹。舉個例子:

<!-- 失活的組件將會被緩存!--><keep-alive> <component v-bind:is='currentTabComponent'></component></keep-alive>

補充知識:vue 利用component組件和is屬性實現(xiàn)動態(tài)組件

我剛學(xué)了一種 vue 新的布局方式,通過config配置,利用component組件和is屬性來控制頁面里面展示內(nèi)容,在這里簡單做一個 dome

1,首先新建一些組件的vue頁面

這個文件的目錄,其中component中的是頁面展示的組件

src assets // 靜態(tài)文件 component // 組件文件 BaseInfo.vue OpenInfo.vue CommentReview.vue OrderInfo.vue config // 配置文件 index.js view // 頁面內(nèi)容 index.vue

這里展示一下 組件中的內(nèi)容

<template> // 其他頁面也一樣,只有背景色與頁面的展示名不同,這就不一一介紹了 <div class='content'>我是 OpenInfo 頁面</div></template><script>export default { name:’openInfo’ data() { return {}; }};</script><style scoped>.content { display: flex; justify-content: space-between; width: 1000px; height: 200px; background-color: green;}</style>

2,config 文件中的配置

const open = function () { const vm = this return [ { // type:‘’ 可以通過type類型來判斷展示那些組件內(nèi)容 modules: [ { id: ’baseInfo’, refName: ’baseInfo’, component: () => import(’@/component/open/BaseInfo’) }, { id: ’lineInfo’, refName: ’lineInfo’, component: () => import(’@/component/open/OpenInfo’) }, { id: ’reviewInfo’, refName: ’reviewInfo’, component: () => import(’@/component/open/CommentReview’) }, { id: ’orderInfo’, refName: ’orderInfo’, component: () => import(’@/component/open/OrderInfo’) } ] } ] } export const openModules = vm => { return open.call(vm) }

3,展示頁面中的操作

<template> <div class='content'> <div>我是 index</div> <div v-for='(content,index) in openListValue' :key='index'> <!-- component標(biāo)簽創(chuàng)建動態(tài)組件,is屬性指向誰,就顯示哪個組件 --> <component :key='content.index' :is='content.component' :ref='content.refName' :refName='content.refName' ></component> </div> </div></template><script>import { openModules } from '@/config/index';export default { data() { return { openList: [], openListValue: [] }; }, mounted() { this.getList(); }, methods: { getList() { this.openList = openModules(vm)[0]; this.openListValue = this.openList.modules; } }};</script><style scoped>.content { padding-top: 20px; display: flex; flex-direction: column; width: 1000px;}</style>

頁面展示:

vue 動態(tài)組件(component :is) 和 dom元素限制(is)用法說明

注:這里配置可以用多個,給他配置里設(shè)置一個 type ,通過 type 類型,來控制展示的是那些界面。這里就不多介紹了

以上這篇vue 動態(tài)組件(component :is) 和 dom元素限制(is)用法說明就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 权威废金属|废塑料|废纸|废铜|废钢价格|再生资源回收行情报价中心-中废网 | 防渗土工膜|污水处理防渗膜|垃圾填埋场防渗膜-泰安佳路通工程材料有限公司 | RO反渗透设备_厂家_价格_河南郑州江宇环保科技有限公司 | 废旧物资回收公司_广州废旧设备回收_报废设备物资回收-益美工厂设备回收公司 | 北京模型公司-工业模型-地产模型-施工模型-北京渝峰时代沙盘模型制作公司 | 美甲贴片-指甲贴片-穿戴美甲-假指甲厂家--薇丝黛拉 | 塑料薄膜_PP薄膜_聚乙烯薄膜-常州市鑫美新材料包装厂 | 丝杆升降机-不锈钢丝杆升降机-非标定制丝杆升降机厂家-山东鑫光减速机有限公司 | 温州中研白癜风专科_温州治疗白癜风_温州治疗白癜风医院哪家好_温州哪里治疗白癜风 | 优考试_免费在线考试系统_培训考试系统_题库系统_组卷答题系统_匡优考试 | 假肢-假肢价格-假肢厂家-河南假肢-郑州市力康假肢矫形器有限公司 | 武汉森源蓝天环境科技工程有限公司-为环境污染治理提供协同解决方案 | 无纺布包装机|径向缠绕包装机|缠绕膜打包机-上海晏陵智能设备有限公司 | 香港新时代国际美容美发化妆美甲培训学校-26年培训经验,值得信赖! | 工业雾炮机_超细雾炮_远程抑尘射雾器-世纪润德环保设备 | PAS糖原染色-CBA流式多因子-明胶酶谱MMP-上海研谨生物科技有限公司 | 内窥镜-工业内窥镜厂家【上海修远仪器仪表有限公司】 | led全彩屏-室内|学校|展厅|p3|户外|会议室|圆柱|p2.5LED显示屏-LED显示屏价格-LED互动地砖屏_蕙宇屏科技 | 环氧乙烷灭菌器_压力蒸汽灭菌器_低温等离子过氧化氢灭菌器 _低温蒸汽甲醛灭菌器_清洗工作站_医用干燥柜_灭菌耗材-环氧乙烷灭菌器_脉动真空压力蒸汽灭菌器_低温等离子灭菌设备_河南省三强医疗器械有限责任公司 | 活性氧化铝|无烟煤滤料|活性氧化铝厂家|锰砂滤料厂家-河南新泰净水材料有限公司 | 亮点云建站-网站建设制作平台 | NBA直播_NBA直播免费观看直播在线_NBA直播免费高清无插件在线观看-24直播网 | 气动绞车,山东气动绞车,气动绞车厂家-烟台博海石油机械有限公司 气动隔膜泵厂家-温州永嘉定远泵阀有限公司 | 新疆散热器,新疆暖气片,新疆电锅炉,光耀暖通公司 | 兰州UPS电源,兰州山特UPS-兰州万胜商贸 | 济南玻璃安装_济南玻璃门_济南感应门_济南玻璃隔断_济南玻璃门维修_济南镜片安装_济南肯德基门_济南高隔间-济南凯轩鹏宇玻璃有限公司 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | 苏州教学设备-化工教学设备-环境工程教学模型|同科教仪 | 儿童语言障碍训练-武汉优佳加感统文化发展有限公司 | 富森高压水枪-柴油驱动-养殖场高压清洗机-山东龙腾环保科技有限公司 | 浙江清风侠环保设备有限公司| 尾轮组_头轮组_矿用刮板_厢式刮板机_铸石刮板机厂家-双驰机械 | 塑胶跑道_学校塑胶跑道_塑胶球场_运动场材料厂家_中国塑胶跑道十大生产厂家_混合型塑胶跑道_透气型塑胶跑道-广东绿晨体育设施有限公司 | 钢制暖气片散热器_天津钢制暖气片_卡麦罗散热器厂家 | 活动策划,舞台搭建,活动策划公司-首选美湖上海活动策划公司 | 废水处理-废气处理-工业废水处理-工业废气处理工程-深圳丰绿环保废气处理公司 | 不干胶标签,不干胶标签纸_厂家-山东同力胶粘制品| 【星耀裂变】_企微SCRM_任务宝_视频号分销裂变_企业微信裂变增长_私域流量_裂变营销 | 冷藏车厂家|冷藏车价格|小型冷藏车|散装饲料车厂家|程力专用汽车股份有限公司销售十二分公司 | 加气混凝土砌块设备,轻质砖设备,蒸养砖设备,新型墙体设备-河南省杜甫机械制造有限公司 | 酒瓶_酒杯_玻璃瓶生产厂家_徐州明政玻璃制品有限公司 |