vue父子组件传值

在vue中父子组件的传值，是我们必须要get的知识点，今天再做一个详细的总结。

1）父组件向子组件传值

父组件向子组件传值通过props，那么什么是props？props形象点来说就是一个盒子，我们通过这个盒子将要传输的数据放入进去，再通过组件之间的引用，传递这个盒子，从而实现数据的传递。

第一步：在父组件中引入子组件，并设定要传输的数据，这里通过v-model进行数据的实时传递

父组件中：

 1> 引入子组件：

            import child from './child'

            components:{

                child

            }

 2>通过组件实例来显示子组件

            <child :message='name'></child>（这里的name为input框双向绑定的数据,将name值绑定给message属性）

子组件中：

   1> 创建标签以接受父组件传过来的值

            <span>{{message}}</span>

   2>通过props来接收数据

            props:['message']

  具体代码如图：

子组件 父组件

2）子组件向父组件传值

主要是通过$emit方法传值，那么什么是$emit呢？它是一种事件实例方法，其有两个参数eventName和需要传输的数据。

子组件中：

    我们需要通过函数来进行事件的触发从而完成数据的传送。

     1>创建标签和点击事件

    <button @click='sendMsg'>点我发送</button>

    data(){

    return{

        childValue:'我是子组件传给父组件的值'

}

}

    sendMsg(){

        $emit('valueBySon',this.childValue)

}

    父组件中：

        需要对组件实例化的标签进行事件的绑定以此来接收数据：

            <child v-on:valueBySon='getSonValue'></child>

            getSonValue(childValue){

                this.name = childValue

}

具体代码如图：

子组件 父组件