父子组件传值

Posted 2023-03-04

参考技术A 父组件向子组件传值的方法是通过v-bind绑定一个参数，其中msg是子组件要存放在props中的数据，FatherMsg是父组件data里的数据，login是子组件，在子组件身上定义一个props,他是一个数组，可以接受一个或者多个参数，例如下面这样：

props中的数据是只读的，这里边存放的都是父组件中穿过来的。在调用时和普通调用一样，像下面这样：

子组件向父组件传值是通过v-on来绑定一个函数，通过子组件来触发show方法，从而触发父组件身上的showFather方法，从而实现子组件向父组件传值。

show是子组件要触发的事件，showFather是父组件身上的方法，通过这个方法的参数，

父组件通过v-bind绑定data上的数据，子组件通过在props上设置接收数据的参数接收父组件的值，然后在父组件上引用这个参数，将数据实现在页面上。

子组件传值到父组件利用了事件触发机制。通过v-on绑定一个事件，子组件利用点击事件，在事件内部通过$.emit触发上边绑定的事件，并且通过参数传子组件里data里的数据到父组件，父组件在自己的方法里实现将传来的数据绑定到自身data里的数据上。