目录

子组件 传值 父组件 $emit()

父组件 传值 子组件 props

父组件调用子组件的方法动态传值

---

分别写了一个父组件和子组件，一个简单的Demo来演示父子组件之间的相互传值和父组件动态传参到子组件的其中一种方法。

我先定义一个父组件

<template>
    <div>父组件中</div>
    <!--子组件-->
    <Child @sendMsg="process" :age="myAge" ref="child"/>
</template>
import Child from '@/components/child'
export default {
    data(){
        return{
            myAge: 56
        }
    },
    components: {
        Child 
    },
    methods:{
        // 接收子组件参数
        process(obj){
            console.log(obj)
        },
        // 调用子组件方法，动态传参
        invokeChildMethod(age){
            this.$refs.child.printAge(age);
        }
    }
}

再来定义一个子组件

<template>
    <input v-model="name_" placeholder="输入姓名"/>
    {{age}}
    <button @click="send">传值给父组件</button>
</template>
export default {
    props:{
        age:{
            type:Number //数据类型有 String、Number、Boolean、Array ...
            default: 165 // 默认值
        }
    },
    data(){
        return{
            name_: '张三'
        }
    }
    methods: {
        send(){
            this.$emit('sendMsg', { name: this.name_, age:this.age });
        },
        printAge(age){
            console.log(age); 
        }
    }
}

子组件 传值 父组件 $emit()

子组件通过this.$emit()传值

this.$emit('sendMsg', msg);



父组件通过监听子函数中事件名称来接收参数

<子组件 @sendMsg="process"></子组件>

methods:{
    process(msg){
        console.log(msg)
    }
}

父组件 传值 子组件 props

父组件通过 v-bind 来传递参数,简写为:age="myAge",意思是把myAge绑定到age上
<子组件 @sendMsg="process" :age="myAge"></子组件>

export default {
    data(){
        return {
            myHeight: 178
        }
    }
}

子组件通在props中定义该变量来接受参数，还可以指定该变量的类型和默认值
props:{
    age:{
        type:Number //数据类型有 String、Number、Boolean、Array ...
        default: 0// 默认值
    }
}
之后的使用跟一般变量一样

子组件接收传值 避免直接改变，因为无论何时父组件都会覆盖该值。

所以如果父组件动态传值给子组件，可以采用下面的方式：

父组件调用子组件的方法动态传值

父组件中：
// 1.给子组件定义ref
<子组件 @sendMsg="process" ref="child"></子组件>

export default {
    methods:{
        // 2调用子组件方法，动态传参
        invokeChildMethod(){
            this.$refs.child.printAge(12)
        }
    }
}



// 下面是子组件中定义的方法，可供父组件调用
export default {
    methods: {
        printAge(age){
            console.log(age); 
        }
    }
}