vue子父组件属性之间的操作

Vue
Vue

属性改变

父组件事件触发改变子组件属性值

在Vue中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

  1. 父组件创建一个改变事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//data
 export default {
    data() {
        return {
            msg: '信息',
            isCurr: {
                a:1,
                b:2
            },
            methods:{
                butFun:function(){
                    this.isCurr.a = 2;
                }
            }
        }
    }
 }
1
2
3
<div class='componmentBox'>
    <information  v-bind:defined='isCurr'></information>
</div>
  • 这里的defined是自己定义的名字，添加在子组件props里面，需要注意是：如果是驼峰名，例如：nameShow，props里面是：props:["nameShow"]，父组件要添加属性是v-bind:name-show="";要添加“-”。
  1. 子组件如何获取改变的事件
1
2
3
4
5
6
7
8
9
10
11
12
13
//子组件添加：
 export default {
    data() {
        return {
            props:["defined"],
            watch:{
                defined:function(val){
                    //这里面的val就是defined的key值
                }
            }
        }
    }
}

子组件改变父组件的值

  1. 子组件educationdate
1
this.$emit("backChangeFalse");
  • 需要在什么时候改变父组件属性时，调用this.$emit()
  1. 父组件
    1. 要在父组件调用组件的元素上添加一个事件方法：v-on:子级自定义=""
    2. 根据父组件的方法来改变父组件上的属性
1
2
3
<div class='componmentBox' >
    <educationdate v-on:backChangeFalse='backChangeFalse'></educationdate>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
export default {
    data() {
        return {
            back:true;
            methods:{
                backChangeFalse:function(){
                    this.back = false;
                }
            }
        }
    }
}
分享到