Vue 事件传值(子to父)

一.事件传值(子to父)

1. Header.vue组件中的h1标签加了点击事件changeTitle

2. changeTitle方法内定义了一个事件，this.$emit("titleChanged","子向父组件传值");。事件名称为titleChanged，事件描述为"子向父组件传值"

3. 来到根组件App.vue当中，在app-header标签（header组件的传输过来的）中绑定这个事件v-on:titleChanged=updateTitle($event)。事件名就为titleChanged，对应的触发方法起一个属性名叫updateTitle并传参，这里的$event参数就是刚刚的事件描述"子向父组件传值"

4. 在下方methods方法中编辑这个updateTitle方法，参数title就是上面的$event。this.title是data里的title，后面的title就是参数。

5. 同时，在app-header标签中v-bind:title="title",通过属性值传送将title值传送给了header和footer组件。

6. 所以一旦，触发header里的title的点击事件，修改title名称，footer和header会一起修改。

点击标题前
点击标题后