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

Vue 2年前 (2020) bestcyt
135 0 0

需求描述

左侧顶部显示设备列表的数量,封装成组件多个页面共用便于后期统一管理;
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>

 

 

版权声明:bestcyt 发表于 2020年12月15日 am10:26。
转载请注明:vue父子组件传值,监听传值改变 | 爱前端导航

相关文章

联系站长