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

    }
};

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

<span class="title">{{title}}</span>

<span class="number"> · {{number}}</span>

</p>

</template>

/** @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';

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

components: {
        dynamicMenu,
        GWVideo,
        GWLeftHearderTitle
    },

1

2

3

4

5

components: {

dynamicMenu,

GWVideo,

GWLeftHearderTitle

},

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

1

2

3

4

</div>

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

需求描述

子组件

父组件

联系我们

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

需求描述

子组件

父组件

相关推荐

请登录

联系我们