vue组件互相传值

父组件传值给子组件

父：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <div>
        <HeadBar :titleObj="initTitle"></HeadBar>
    </div>
</template>
import HeadBar from '../component/headBar.vue';
export default {
    data(){
        return{
            initTitle:{
                title:'戳泡泡',
                style:'background:rgba(0, 0, 0, 0.1);',
                isIndex:1
            }
        }
    },
    ...
    components:{
        HeadBar
    }
}

子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
    <div :style="titleObj.style">
        {{titleObj.title}}
    </div>
</template>
export default {
    ...
    props:['titleObj']
    //
    props:{
        titleObj:{
            type:String,
            defalut:'默认'
        }
    }
}

父组件调用子组件方法

1
2
3
4
5
6
7
8
9
10
11
12
13
子：
methods:{
    setQuery(query){
        this.query = query
    }
}
父：
<search-box ref="searchBox"></search-box>
methods:{
    some(query){
        this.$refs.searchBox.setQuery(query);
    }
}

子组件绑定父组件方法

子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
    <pressBtn @click.native="bindParentFunc"></pressBtn>
</template>
export defalut {
    ...
    components:{
        pressBtn
    },
    methods:{
        bindParentFunc(){
            //this.$parent.initAlertScore.isShow = false;
            this.$emit('playAgainGame');
        }
    }
}

注释：vm.$emit(event,[...args]) 触发当前实例上的事件。附加参数都会传给监听器回调。

父：

1
2
3
4
5
6
7
8
9
10
11
<template>
    <popupScore v-if="initAlertScore.isShow" @playAgainGame="isClickPlayAgain"></popupScore>
</template>
export default {
    ...
    methods:{
        isClickPlayAgain(){
            //some...
        }
    }
}
【VUE】, vue组件互相传值