父子传值

父向子传值

父组件中 定义数据 自定义属性

<left :msg="message" :user="userinfo"></left>  //引用的组件
​
export default{
    message:'xinxi',
    userinfo:{name:'zxy',age:18}
}

子组件 props接收数据，相当于复制了一份数据

<p>{{ msg }}</p>
<p>{{ user }}</p>
​
export default{
    props:['msg','user']    //子组件接收  props是只读的，不能直接修改 不建议修改，建议转存后再修改
}
​
子组件修改值 例子：user.name = 'zs'

 

子向父传值

子组件 自定义属性

子组件向父组件共享数据使用自定义事件

例如：自定义事件 numchange

data(){
    return{
        //子组件自己的数据，需要传的值
        count：0
    }
},
methods:{
    add(){
        this.count += 1
        this.$emit('numchange',this.count)  //自定义一个触发事件，并传递数据给父组件
    }
}

父组件 触发子组件自定义的事件

<Son @numchange="getNewCount"></Son>    //@触发事件名
​
data(){
    return{
        //用来保存子组件传递过来的值
        countFromSon: 0
    }
},
methods:{
    //获取子组件传递过来的数值
    getNewCount(val){
        this.countFromSon = val
    }
}