vue子组件向父组件传值的方法

今天和大家分享一下父子组件之间通信，子向父集传值的方式。

组件代码

<!-- 父组件模板 -->
    <div id="app">
      <cpn :cinfo='info' @itemclick="topClick"></cpn>
    </div>

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

先在子组件中定义一个click事件，通过触发click事件用$emit()方法向父组件传输数据，父组件通过定义一个事件（注意事件名与子组件的click事件的方法名相同）来接收子组件传过来的值。

js代码部分

 //子组件
      const cpn = {
        template : "#cpn",
        props:{

        },
        data(){
          return{
            categories:[
              {id:"1",name:"热门推荐"},
              {id:"2",name:"手机数码"},
              {id:"3",name:"家用家电"},
              {id:"4",name:"电脑办公"}
            ]
          }
        },
        methods:{
          itemClick(item){
            // console.log(item);
            this.$emit("itemclick",item)
          }
        }
      }

      //父组件
      const app = new Vue({
        el:"#app",
        data:{
          info:{
            name:"bug",
            age:"18",
            sex:"男"
          }
        },
        components:{
          cpn
        },
        methods:{
          topClick(item){
            console.log(item.name)
          }
        }
      })

以上就是子组件向父组件传值的方法，你看懂了吗？