Vue:在下面的这个例子中,为什么需要将点击事件告诉父组件?原理是什么?

[manyfreebug]

Vue:在下面的这个例子中,为什么需要将点击事件告诉父组件?原理是什么?也可以用伪代码示例一下

[murmur]

这就是组件封装的自定义事件写法啊。。

[murmur]

他这个例子上面写的不恰当，我记得组件上的 click 要写 @click.native 吧

[hfc]

说明实际处理事件的是父组件

[1KN6sAqR0a57no6s]

为什么要将点击事件告诉父组件：因为 Vue 的数据驱动视图、单向数据流的理念让你不得不将点击事件告诉父组件。就拿你看的这个例子来说，子组件 todo-item 想把自己删了，但是它自己并没有一个属性可以控制自己是否被删除，因为真正让自己出现的是父组件里的 list。只要从父组件里的 list 里去掉自己的名字，自己就会瞬间消失。要怎么从父组件里的 list 去掉自己的名字呢，最简单的方法就是告诉父组件：”删除，我”。

[learnshare]

为了让父组件处理数据
这体现了 GUI 系统中的核心概念，一切都是由事件驱动的

[manyfreebug]

@YuxiangLuo 子组件要是能直接使用父组件里的数据那多好

[Curtion]

@manyfreebug #6 $parent 可以拿到值，你也可以通过 prop 传值啊，vue 提倡单向数据，不建议子组件修改父组件的值。要不你使用 vuex 吧

[hoyixi]

Vuejs 单向数据流

父组件把数据通过 props 给子组件，子组件用自己的方式展示，通常子组件不要修改父组件传递过来的数据（比如，该数据可能在其它组件中用到，子组件改了，可能会造成数据不一致），而是由父组件来做，所以发个通知（事件）给父组件。

[agdhole]

rxjs 保平安

[SilentDepth]

@manyfreebug #6
「子组件要是能直接使用父组件里的数据那多好」
「子组件要是能直接使用祖父组件里的数据那多好」
……
「子组件要是能直接使用所有组件里的数据那多好」

这样的结果就是，状态集中于某个组件，或无序地分散在多个组件，从而失去了组件化的意义。

当然讲究状态分层就会带来一定的访问障碍，这是难以避免的副作用。（所以 Vue 3 的 Hooks 好啊！）

[Mutoo]

Re: "子组件要是能直接使用父组件里的数据那多好"
子组件不应该直接修改父组件的内容，那样会对父组件产生依赖，增加两个组件间的耦合度。这样的子组件很难复用到其它地方。
解决方案就是使用消息来解耦合。
以这个删除事件为例，这个子组件可以被不同的父组件复用，而不关心父组件使用何种数据结构。
子组件只关心自己要呈现什么数据，而用事件来通知父组件何时去删除绑定的数据。
父组件侦听这个删除事件，并根据自己的数据结构来删除数据。