vue父子组件传值

本文由个人总结，如需转载使用请标明原著及原文地址

写这篇文章的时候懒得开开发工具，所以代码都是纯手撸的，如果有错请指出

1.父组件向子组件传值

例如父组件中用到一个叫<child>的子组件

在父组件中直接用 :属性名=值  或者 v-bind:属性名=值

<child :msg="msg"/>
or
<child v-bind:msg="msg"/>

<script>
export default {
    data () {
        return () {
            msg: 'this msg from parent component'
        }
    }

}
</script>

子组件中用props接收

<div>{{msg}}<div/>

<script>
export default {
    props: {
        msg: ''
    }

}
</script>

2.子组件向父组件传数据

父组件通过给子组件绑定方法来获取子组件传的参数

<div>{{msg}}</div>

<child @childEmitString="parentMethod"/>
or
<child v-on:childEmitString="parentMethod"/>

<script>
export default {
    data () {
        return () {
            msg: ''
        }
    },
    methods: {
        parentMethod(data) {
            this.msg = data
        }
    }

}
</script>

子组件通过$emit向父组件传参

this.$emit(var1，var2...)

第一个参数为父组件方法上绑定的方法名，后面的参数为方法的入参，可以有多个

<script>
export default {
    created () {
        this.$emit('childEmitString', 'this msg from child')
    }

}
</script>