博客
关于我
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/

你可能感兴趣的文章
MySQL5.7.18主从复制搭建(一主一从)
查看>>
MySQL5.7.19-win64安装启动
查看>>
mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程
查看>>
MySQL5.7.37windows解压版的安装使用
查看>>
mysql5.7免费下载地址
查看>>
mysql5.7命令总结
查看>>
mysql5.7安装
查看>>
mysql5.7性能调优my.ini
查看>>
MySQL5.7新增Performance Schema表
查看>>
Mysql5.7深入学习 1.MySQL 5.7 中的新增功能
查看>>
Webpack 之 basic chunk graph
查看>>
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>
mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
查看>>
Mysql8 数据库安装及主从配置 | Spring Cloud 2
查看>>
mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件 能够使用的my.cnf配置文件
查看>>
MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
查看>>
MYSQL8.0以上忘记root密码
查看>>
Mysql8.0以上重置初始密码的方法
查看>>
mysql8.0新特性-自增变量的持久化
查看>>