其他分享
首页 > 其他分享> > 二十、父子组件的通信(子组件向父组件传递数据)

二十、父子组件的通信(子组件向父组件传递数据)

作者:互联网

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

这个时候,我们需要使用自定义事件来完成。

■什么时候需要自定义事件呢?

■自定义事件的流程:

    <div id="app">
      <!-- <cpn v-on:itemclick=""></cpn> -->
      <cpn @itemclick="cpnClick"></cpn>
    </div>
    
    <!-- 子组件模板 -->
    <template id="id_cpn">
      <div>
        <button v-for="item in categories" @click="itemClick(item)">
          {{item.name}}
        </button>
      </div>
    </template>

    <script>
      const cpn = {
        template: "#id_cpn",
        data() { 
          return {
             categories: [
               {id: 'aaa', name: "热门推荐"},
               {id: 'bbb', name: "手机数码"},
               {id: 'ccc', name: "家用家电"},
               {id: 'ddd', name: "电脑办公"},
            ]
          }
        },
        methods: {
          itemClick(item){
            //子组件发射事件:自定义事件
            this.$emit("itemclick",item);
          }
        }
      }

      const app = new Vue({
        el: "#app",
        data: {
          message: "Hellow World",
          info: {name: "why",age: 18,height: 1.88}
        },
        components:{ 
          cpn:cpn
        },
        methods: {
          cpnClick(item){
            console.log(item);
          }
        }
      });
    </script>

  

标签:name,自定义,向父,传递数据,事件,item,组件,id
来源: https://www.cnblogs.com/wangshunyun/p/16116052.html