Vue子组件向父组件使用自定义事件$emit传递数据无效的坑

子级向父级传递—自定义事件

• 当子组件需要向父组件传递数据时，用到的是自定义事件
• 自定义事件的流程：
  • 在子组件中，通过$emit()来触发事件。
  • 在父组件中，通过v-on来监听子组件事件。
• 我们来看一个简单的例子：
  • 我们之前做过一个两个按钮+1和-1，点击后修改counter。
  • 我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件。
  • 这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total。

 
  <!--父组件模板-->
  <div id="app">
    <!-- 3.在父组件子标签中，通过v-on来监听子组件事件 并添加一个响应该事件的处理方法 -->
    <cpn @item-click="cpnClick"></cpn>
  </div>
 
  <!--子组件模板-->
  <template id="cpn">
    <div>
      <!-- 1.在子组件中创建一个按钮，给按钮绑定一个点击事件 -->
      <button v-for="item in categories" @click="btnClick(item)">
        {{item.name}}
      </button>
    </div>
  </template>
 
  <script src="../js/vue.js"></script>
  <script>
    // 子传父 自定义事件
 
    // 子组件 
    const cpn = {
      template: '#cpn',
      data() {
        return {
          categories: [{
              id: 'aaa',
              name: '热门推荐'
            },
            {
              id: 'bbb',
              name: '手机数码'
            },
            {
              id: 'ccc',
              name: '家用家电'
            },
            {
              id: 'ddd',
              name: '电脑办公'
            },
          ]
        }
      },
      methods: {
        btnClick(item) {
          // 发射事件: 自定义事件
          // 2.在子组件中，通过$emit()来触发事件
          this.$emit('item-click', item)
          // 注意！！！！这里的$emit事件名不要写成驼峰！！！脚手架里可以，会先编译成一个组件对象render函数
        }
      }
    }
 
    // 父组件 
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      },
      components: {
        cpn
      },
      methods: {
        cpnClick(item) { // 这里的参数是接收子组件传过来的数据的
          console.log('cpnClick', item);
          
        }
      }
    })
  </script>

重点来了！！！！

• 这里的父组件是app，子组件是cpn
• 在父组件子标签中，通过v-on来监听子组件事件 并添加一个响应该事件的处理方法，即监听的事件应该写在子组件cpn在父组件app里调用的标签上，而不是写在app上
• 这里的父组件触发其实是指的在父组件的作用域下，在子组件上v-on:触发，很久之前学的Vue了，今天做项目的时候写的时候写到app上了，还是自己太粗心了

  <!--父组件模板-->
  <div id="app">
    <!-- 在父组件子标签中，通过v-on来监听子组件事件 并添加一个响应该事件的处理方法 -->
    <cpn @item-click="cpnClick"></cpn>
  </div>