Vue:在下面的这个例子中,为什么需要将点击事件告诉父组件?原理是什么?
manyfreebug · 2019-07-06 12:23:23 +08:00 · 4179 次点击这是一个创建于 1962 天前的主题，其中的信息可能已经有所发展或是发生改变。
Vue:在下面的这个例子中,为什么需要将点击事件告诉父组件?原理是什么?也可以用伪代码示例一下
 |
1
murmur 2019-07-06 12:31:41 +08:00
这就是组件封装的自定义事件写法啊。。
|
 |
3
hfc 2019-07-06 12:34:33 +08:00
说明实际处理事件的是父组件
|
 |
4
1KN6sAqR0a57no6s 2019-07-06 13:02:02 +08:00  3
为什么要将点击事件告诉父组件：因为 Vue 的数据驱动视图、单向数据流的理念让你不得不将点击事件告诉父组件。就拿你看的这个例子来说，子组件 todo-item 想把自己删了，但是它自己并没有一个属性可以控制自己是否被删除，因为真正让自己出现的是父组件里的 list。只要从父组件里的 list 里去掉自己的名字，自己就会瞬间消失。要怎么从父组件里的 list 去掉自己的名字呢，最简单的方法就是告诉父组件：”删除，我”。
|
 |
5
learnshare 2019-07-06 13:53:16 +08:00
为了让父组件处理数据
这体现了 GUI 系统中的核心概念，一切都是由事件驱动的 |
 |
6
manyfreebug OP @YuxiangLuo 子组件要是能直接使用父组件里的数据那多好
|
 |
7
Curtion 2019-07-06 14:49:24 +08:00 via Android 1
@manyfreebug #6 $parent 可以拿到值，你也可以通过 prop 传值啊，vue 提倡单向数据，不建议子组件修改父组件的值。要不你使用 vuex 吧
|
 |
8
hoyixi 2019-07-06 18:28:31 +08:00 1
Vuejs 单向数据流
父组件把数据通过 props 给子组件，子组件用自己的方式展示，通常子组件不要修改父组件传递过来的数据（比如，该数据可能在其它组件中用到，子组件改了，可能会造成数据不一致），而是由父组件来做，所以发个通知（事件）给父组件。 |
 |
9
agdhole 2019-07-06 18:31:57 +08:00
rxjs 保平安
|
 |
10
SilentDepth 2019-07-06 19:30:19 +08:00 1
@manyfreebug #6
「子组件要是能直接使用父组件里的数据那多好」 「子组件要是能直接使用祖父组件里的数据那多好」 …… 「子组件要是能直接使用所有组件里的数据那多好」 这样的结果就是，状态集中于某个组件，或无序地分散在多个组件，从而失去了组件化的意义。 当然讲究状态分层就会带来一定的访问障碍，这是难以避免的副作用。（所以 Vue 3 的 Hooks 好啊！） |
 |
11
Mutoo 2019-07-06 22:08:54 +08:00 1
Re: "子组件要是能直接使用父组件里的数据那多好"
子组件不应该直接修改父组件的内容，那样会对父组件产生依赖，增加两个组件间的耦合度。这样的子组件很难复用到其它地方。 解决方案就是使用消息来解耦合。 以这个删除事件为例，这个子组件可以被不同的父组件复用，而不关心父组件使用何种数据结构。 子组件只关心自己要呈现什么数据，而用事件来通知父组件何时去删除绑定的数据。 父组件侦听这个删除事件，并根据自己的数据结构来删除数据。 |
Select Language