Vue引用其他组件,但组件某些部分不需要时的简单处理
生活随笔
收集整理的這篇文章主要介紹了
Vue引用其他组件,但组件某些部分不需要时的简单处理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
項目開發時,我們會把多個地方重復使用的模塊抽象成組件,提供給大家一起使用,但是使用組件的時候偶爾會遇見一些問題,比如說組件里只有某些東西自己并不需要,這個時候我們可以對組件進行簡單的修改,而不影響其他人的使用。
?
這里有一個方法,舉個例子簡單說明一下。
?
我們在頁面上引入一個其他組件,然后給組件傳入一個狀態值。
頁面
<template><div><show-my-test :state="true"></show-my-test></div> </template><script>import showMyTest from '~/components/showMyTest.vue';export default {name: 'index',components: {showMyTest: showMyTest}}; </script><style scoped></style>組件通過props獲取Boolean類型的值,如果沒有獲取到值則會默認為false,我們可以通過這個來解決一些問題。
組件
<template><div><div><p>今天是周一!</p></div><div v-if=“!state”><p>今天天氣不錯</p></div></div> </template><script>export default {name: 'index',props: {state: {type: Array}}; </script><style scoped></style>這樣的話,在使用上面這個組件的時候,如果沒有給組件傳state的值,則今天天氣不錯那里正常顯示,不影響使用,如果給組件傳了一個true的值,則這一塊則不會顯示。
?
通過這樣的方法可以解決挺多組件復用時候產生的問題,這里只是一個簡單的例子,實際問題應該根據需求來處理。
?
恩,就醬~
?
轉載于:https://www.cnblogs.com/jin-zhe/p/9268602.html
總結
以上是生活随笔為你收集整理的Vue引用其他组件,但组件某些部分不需要时的简单处理的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 利用npm安装/删除/发布/更新/撤销发
- 下一篇: 软件测试模型以及测试方法