Vue 父子组件的通信传参(props、$emit)

<my_cpn :cmovies=“movies” :cmessage=“message”></my_cpn>

• {{movie}}

• {{cmovies}}

  {{cmessage}}

  ---

  自定义事件（子传父）

  • props用于父组件向子组件传递数据，还有一种比较常见的事子组件传递数据或事件到父组件中

  • 我们需要用自定义事件来完成

  • 什么时候需要自定义事件呢？

  • 当子组件需要向父组件传递数据时，就要用到自定义事件

  • v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义

  • 事件自定义事件的流程：

  • 在子组件中，通过$emit()来监听事件

  • 在父组件中，通过v-on来监听子组件事件

  • 简单例子：

  • 我们之前做过两个按钮+1和-1，点击修改counter

  • 我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件

  • 这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total

  <cpn @itemclick=“cpnclick”>

  <button v-for=“item in categories” @click=“itemclick(item)”>

  {{item.name}}