component — 组件传值子传父

最后更新于:2022-04-02 08:07:22

[TOC] >[success] # 子传父 ~~~ 1.想要子传父,通过子组件控制父组件方法,进而让父组件的方法自己改变自己 的data 2.明确父组件绑定的dom上内容作用域都属于父组件的,因此传值的都是父组件 的data或者methods例如下面的案例,首先v-bind:title = 'title'和 :click='parentClick' 中左面都是子组件的接受的变量值,右面都有可能是父组件 data或者methods传值,父传子不仅仅可以传data也可以传methods:
3.简单总结:等号左面的属于子组件的右面属于父组件 ~~~ >[info] ## 子传父 ~~~ 1.子传父就是子组件控制父组件方法,让父组件变相改变自己data 2.需要在子组件methods,某个方法中使用$emit('func','传递的参数') 来控制 3.这种控制是变相的,因此会在子组件中单独有一个事件在内部专门触发,$emit 方法。 ~~~ >[danger] ##### 使用$emit -- 案例 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/429e3cd47a7eded5e1a48afa505ab302_337x315.png) ~~~ Title
{{count}}
~~~ >[danger] ##### 使用 -- sync语法糖案例 ~~~ 1.2.3.0新增的语法糖 2.这种就不涉及到通过方法去操控父组件中的data改变,而是利用子传父的思 想,把props中的属性值和父组件中的data形成捆绑,利用$emit改变子组件的 data,变相改变了父组件中的data ~~~ ~~~ Title
{{count}}
~~~ >[danger] ##### props -- 利用函数回调的方式,不推荐使用 ~~~ 1.这种方法不推荐,利用的是在父组件绑定一个和子组件相关的方法利用props ,在子组件去调用方法的时候,变相的调用父组件和props相关绑定的方法,形成 回调函数,来实现子传父 ~~~ * 子组件的写法 ~~~ ~~~ * 父组件的写法 ~~~ ~~~
';