德阳 网站建设,wordpress设置标题颜色,人工智能绘画,北京百度推广排名优化动态组件的基本使用
动态组件#xff08;Dynamic Components#xff09;是一种在 Vue 中根据条件或用户输入来动态渲染不同组件的技术。
在 Vue 中使用动态组件#xff0c;可以使用 元素#xff0c;并通过 is 特性绑定一个组件的名称或组件对象。通过在父组件中改变 is 特…动态组件的基本使用
动态组件Dynamic Components是一种在 Vue 中根据条件或用户输入来动态渲染不同组件的技术。
在 Vue 中使用动态组件可以使用 元素并通过 is 特性绑定一个组件的名称或组件对象。通过在父组件中改变 is 特性的值可以动态切换渲染的组件。
第一种写法
A.vue
templatedivA component/div
/templatescript setup langts/scriptstyle scoped/styleB.vue C.vue 同理
APP.vue
templatediv styledisplay: flex;!-- class可以写两个一个静态一个动态 --div clickswitchCom(item, index) :class[active index ? active : ] classtabsv-for(item, index) in datadiv{{ item.name }}/div/div/divcomponent :iscomId/component
/templatescript setup langts
import { ref, reactive } from vue;
import AVue from ./components/A.vue
import BVue from ./components/B.vue
import CVue from ./components/C.vue
// 这里不需要将对象中所有数据变为响应式可以使用ref
const comId ref(AVue)
const active ref(0)const switchCom (item, index) {comId.value item.comactive.value index
}const data reactive([{name: A,com: AVue},{name: B,com: BVue},{name: C,com: CVue}
])
/scriptstyle langscss scoped
.active {background: blueviolet;
}.tabs {border: 1px solid #ccc;padding: 5px 10px;margin: 5px;cursor: pointer;}
/style第二种写法
APP.vue
templatediv styledisplay: flex;!-- class可以写两个一个静态一个动态 --div clickswitchCom(item, index) :class[active index ? active : ] classtabsv-for(item, index) in datadiv{{ item.name }}/div/div/divcomponent :iscomId/component
/templatescript setup langts
// markRaw作用标记一个对象使其永远不会再成为响应式对象。
import { ref, reactive, markRaw, shallowRef } from vue;// 这里不需要将对象中所有数据变为响应式可以使用ref
const comId shallowRef(AVue)
const active ref(0)const switchCom (item, index) {comId.value item.comconsole.log(comId.value);active.value index
}const data reactive([{name: A,com:AVue},{name: B,com:BVue},{name: C,com:CVue}
])
/scriptscript langts
import AVue from ./components/A.vue
import BVue from ./components/B.vue
import CVue from ./components/C.vueexport default {components: {AVue,BVue,CVue}
}
/scriptstyle langscss scoped
.active {background: blueviolet;
}.tabs {border: 1px solid #ccc;padding: 5px 10px;margin: 5px;cursor: pointer;}
/style性能优化
上述第一种写法代码会出现警告 输出 comId 的值出现 comId 的属性被劫持出现性能浪费
解决方法
使用markRaw和shallowRef这两个API
App.vue
templatediv styledisplay: flex;!-- class可以写两个一个静态一个动态 --div clickswitchCom(item, index) :class[active index ? active : ] classtabsv-for(item, index) in datadiv{{ item.name }}/div/div/divcomponent :iscomId/component
/templatescript setup langts
// markRaw作用标记一个对象使其永远不会再成为响应式对象。
import { ref, reactive, markRaw, shallowRef } from vue;
import AVue from ./components/A.vue
import BVue from ./components/B.vue
import CVue from ./components/C.vue
// 这里不需要将对象中所有数据变为响应式可以使用ref
const comId shallowRef(AVue)
const active ref(0)const switchCom (item, index) {comId.value item.comconsole.log(comId.value);active.value index
}const data reactive([{name: A,com: markRaw(AVue)},{name: B,com: markRaw(BVue)},{name: C,com: markRaw(CVue)}
])
/scriptstyle langscss scoped
.active {background: blueviolet;
}.tabs {border: 1px solid #ccc;padding: 5px 10px;margin: 5px;cursor: pointer;}
/style再次输出 comId 的值解决性能浪费的问题
