vue 之父子组件传值

vue的重点之一就是组件化，在开发过程中我们必须要考虑到的就是父子组件之间的传值问题。在这篇文章中我会跟大家分享一下，我在开发中对这方面问题的处理
一、父组件向子组件传值
先看示例代码

//parent.vue(父组件)
<template>
    <div>
        <child :message="tochild"></child>
        <!-- <child v-bind:message="tochild"></child> -->
    </div>
</template>
<script>
    //引入头部组件
    import child from '../components/child.vue';
    export default {
        name: 'app',
        components: {
            child
        },
        data() {
            return {
                tochild:'to child message'
            }
        },
        methods: {},
        mounted () {}
    }
</script>
<style scoped>
</style>

//child.vue(子组件)
<template>
    <div></div>
</template>
<script>
    export default {
        name: 'child',
        props: {
                        message:{}，
            //message:{
            //  type: String,
                //default: ''
            //}
        },
        data() {
            return {}
        },
        methods: {},
        mounted () {}
    }
</script>
<style scoped>
</style>

如大家所见，我们在父组件中给子组件定义一个属性并赋值，在子组件中我们就可以通过props获取到对应属性所对应的值。
在子组件文件中，我注释掉了几行代码，因为在在开发过程中有的时候我们并不能完全确定传过来的值的类型，一旦实际传输的值的类型与预计的不一样，就会报错，而且在传输odject、array类型的值时如果规定了type值，处理起来相对也会麻烦一些。所以这里我暂时选择不明确规定传输的值。

二、子组件向父组件传值
示例代码

//parent.vue(父组件)
<template>
    <div>
        <child @toParent="toParentMsg"></child>
    </div>
</template>
<script>
    //引入头部组件
    import child from '../components/child.vue';
    export default {
        name: 'app',
        components: {
            child
        },
        data() {
            return {}
        },
        methods: {
            toParentMsg(data){
                console.log(data);
            },
        },
        mounted () {}
    }
</script>
<style scoped>
</style>

//child.vue(子组件)
<template>
    <div>
        <button @click="msgToParent"></button>
    </div>
</template>
<script>
    export default {
        name: 'child',
        data() {
            return {
                toParentMsg : 'success'
            }
        },
        methods: {
            msgToParent(){
                this.$emit('toParent', this.toParentMsg )
            }
        },
        mounted () {
            
        }
    }
</script>
<style scoped>
</style>

在父组件文件监听子组件一个事件去触发一个函数方法，在下面的js中就可以通过这个函数方法获取到值。在子组件中我们通过emit方法给父组件传值，两个参数，第一个是触发的事件，第二是要传的值可以使各种类型。这样我们就完成了从子组件到父组件的传值。

面对命运不妥协，面对困难不退缩，这样才能做自己的英雄。

vue 之 父子组件传值

推荐阅读更多精彩内容

vue 之父子组件传值