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
Title
~~~
* 父组件的写法
~~~
~~~
';
{{count}}
~~~
>[danger] ##### 使用 -- sync语法糖案例
~~~
1.2.3.0新增的语法糖
2.这种就不涉及到通过方法去操控父组件中的data改变,而是利用子传父的思
想,把props中的属性值和父组件中的data形成捆绑,利用$emit改变子组件的
data,变相改变了父组件中的data
~~~
~~~
{{count}}
~~~
>[danger] ##### props -- 利用函数回调的方式,不推荐使用
~~~
1.这种方法不推荐,利用的是在父组件绑定一个和子组件相关的方法利用props
,在子组件去调用方法的时候,变相的调用父组件和props相关绑定的方法,形成
回调函数,来实现子传父
~~~
* 子组件的写法
~~~