vue中父组件向子组件传递值、方法

在vue中 子组件是默认无法访问到父组件data中的数据和methods中的方法的,所以我们需要使用特定的方法来完成它。

一、父组件向子组件传值 

通过 props声明传递过来的值即可：

流程:

1、通过属性绑定把父组件中需要传递的内容通过v-bind的形式传递给子组件，供子组件使用。

2、在子组件内部通过props来获取父组件传递过来的属性名(props是单向向下绑定的，可以通过父组件中改变而同时改变下级的内容,但是反过来会报错，可以通过在data中定义一个属性并将这个 prop 用作其初始值，同步对组件的修改，再通知父组件更新)。

    
    
    
    Document
    


    

        
        
    


    var vm = new Vue({
        el:"#app",
        data:{
            msg:'123 A -父组件中的数据' 
        },
        methods:{},
        components:{
            com1:{
                data(){ //注意:子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过Ajax，请求回来的数据，都可以放到data身上
                //Data上的数据都是可读可写的
                    return{
                        title:'123',
                        content:'qqq'
                    }
                },
                template:'这是子组件----{{ parentmsg }}',
                //注意：组件中的所有props中的数据 都是通过父组件传递给子组件的。
                //props 中的数据，都是只读的，无法重新赋值
                props:['parentmsg'], //把父组件传递过来的parentmsg属性 现在props数组中定义一下，这样才能使用这个数据
                methods:{
                    change(){
                        this.parentmsg = '1111'
                    }
                }
            }
        }
    })

点击改变prop属性时

二、父组件向子组件传递方法

可以通过$emit方法来调用父组件传递过来的方法与传值类似，

案例中在父组件中声明了一个show方法,通过@func将方法传递给子组件。

流程:

1.通过自定义一个事件名来将方法绑定到子组件上传到子组件内部。

2.子组件通过$emit()来调用父组件的方法

    
    
    
    Document
    


    

        
        
    

    
        

            这是子组件
            
        
    


    // 声明一个子组件，并添加到父组件的components中
    var com2 = {
        template:'#tmp1',
        data(){
            return{
                sonmsg:{name:'son',age:6}
            }
        },
        methods:{
            myclick(){
                //emit 触发
                this.$emit('func',this.sonmsg)
            }
        }
    }

    var vm = new Vue({
        el:"#app",
        data:{
            FormSon:null
        },
        methods:{
            show(data){
                console.log('调用了父组件身上的show 方法-----'+data.name)
                this.FormSon = data;
            }
        },
        components:{
            com2
        }
    })

如有不对希望各位批评指正，在此感谢大家!