博客
关于我
vue中父子组件之间的传值
阅读量:545 次
发布时间:2019-03-08

本文共 1453 字,大约阅读时间需要 4 分钟。

父组件向子组件传值: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监听子组件事件

转载地址:http://yfviz.baihongyu.com/

你可能感兴趣的文章
Mysql中常用函数的使用示例
查看>>
MySql中怎样使用case-when实现判断查询结果返回
查看>>
Mysql中怎样使用update更新某列的数据减去指定值
查看>>
Mysql中怎样设置指定ip远程访问连接
查看>>
mysql中数据表的基本操作很难嘛,由这个实验来带你从头走一遍
查看>>
Mysql中文乱码问题完美解决方案
查看>>
mysql中的 +号 和 CONCAT(str1,str2,...)
查看>>
Mysql中的 IFNULL 函数的详解
查看>>
mysql中的collate关键字是什么意思?
查看>>
MySql中的concat()相关函数
查看>>
mysql中的concat函数,concat_ws函数,concat_group函数之间的区别
查看>>
MySQL中的count函数
查看>>
MySQL中的DB、DBMS、SQL
查看>>
MySQL中的DECIMAL类型:MYSQL_TYPE_DECIMAL与MYSQL_TYPE_NEWDECIMAL详解
查看>>
MySQL中的GROUP_CONCAT()函数详解与实战应用
查看>>
MySQL中的IO问题分析与优化
查看>>
MySQL中的ON DUPLICATE KEY UPDATE详解与应用
查看>>
mysql中的rbs,SharePoint RBS:即使启用了RBS,内容数据库也在不断增长
查看>>
mysql中的undo log、redo log 、binlog大致概要
查看>>
Mysql中的using
查看>>