需求描述
左侧顶部显示设备列表的数量,封装成组件多个页面共用便于后期统一管理;
子组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <template> <p v-if="state" class="gw-left-hearder-title-font"> <span class="title">{{title}}</span> <span class="number"> · {{number}}</span> </p> </template> <script> /** @file 组件 **/ export default { name: 'GWLeftHearderTitle', props: ['GWLeftHearderTitle'], data () { return { title: '', number: 0, btn: '', state: true, msg: null }; }, // 监听父组件传值【传过来的值有改变就会触发】 watch: { GWLeftHearderTitle (n, o) { console.log('新值-n--', n); console.log('旧值-o--', o); this.title = this.GWLeftHearderTitle[1]; this.number = this.GWLeftHearderTitle[2]; } }, mounted () { }, methods: { } }; |
父组件
引用组件
1 | import GWLeftHearderTitle from '../../components/leftHearderTitle/leftHearderTitle.vue'; |
1 2 3 4 5 | components: { dynamicMenu, GWVideo, GWLeftHearderTitle }, |
使用组件
1 2 3 4 | <div class="equipList_header_mian"> <GWLeftHearderTitle :GWLeftHearderTitle="[true,'全部设备',equipNumber]"></GWLeftHearderTitle> <!-- <p>全部设备 · {{equipNumber}}</p> --> </div> |