vue父子组件传值，监听传值改变

需求描述

左侧顶部显示设备列表的数量，封装成组件多个页面共用便于后期统一管理；

子组件

<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: {

    }
};

 

父组件

引用组件

import GWLeftHearderTitle from '../../components/leftHearderTitle/leftHearderTitle.vue';

components: { dynamicMenu, GWVideo, GWLeftHearderTitle },

 

使用组件

<div class="equipList_header_mian">
    <GWLeftHearderTitle :GWLeftHearderTitle="[true,'全部设备',equipNumber]"></GWLeftHearderTitle>
    <!-- <p>全部设备 · {{equipNumber}}</p> -->
</div>