vue中父子组件之间的传值

父组件向子组件传值：props

子组件像父组件传值：$emit

props中定义的属性类型：

 定义子组件

export default {

 props: {

   mess: {

      type: String,      //定义属性类型

      default: 'aaaa'，      //定义默认值   

      require: true     //表示是否是必传这个属性

    }，

    params: {

      type: Object,      //定义属性类型

      default(){  

            return []     注意：当类型为数组或者对象的时候，默认值必须是个函数

      }，   

      require: true     //表示是否是必传这个属性

    }

  },

 methods:{

       console.log(this.params);     //打印结果{id:1,name:手机}

 }

}

父组件模板

注意：v-band绑定属性目前不支持驼峰命名，但可以使用‘-’，比如:my-Info

<div>

    //<honorList>为自定义的子组件标签

    <honorList ref="childHonor" :param="params"></honorList>   

     //子组件需要引入父组件中的值时，必须用v-band属性绑定

</div>

import honorList from "./child/list";    //导入子组件

export default {

  components: {      //注册子组件

      honorList           

  }

  data() {

    return {

          params:{

                id:1,

               name:手机

          }

    };

  }

}

----------------------------------------------------------------------------------------------------------------------------------------------------

子组件向父组件传值：

//子组件模板

<div>

    <button  v-for="item,index in itemList" @click="btnClick(item)" >

         {{item.name}}

    </button>

</div>

//父组件模板

<div>

    <honorList  @itemclick="honorclick"></honorList>    子组件需要引入父组件中的值时，必须用v-band属性绑定

</div>

//定义子组件

export default {

  data() {

    return {

      itemList:[

           {

               id:1,

               name:'手机'

           },

           {

              id:2，

              name:'电脑'

           }

       ]

    };

  },

 methods:{

      btnClick(item){

           //发射事件,自定义事件

           this.$emit("itemclick",item);    ("发射给父组件事件的名称"，事件参数)

      }

}

}

import honorList from "./child/list";    //导入子组件

//定义父组件

export default {  

  components: {      //注册子组件

      honorList           

  }

 methods:{

      honorclick(item){

           console.log(item);      //打印出来结果为{id:1,name:手机}

      }

}

}

在子组件中通过$.emit()触发事件

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