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

你可能感兴趣的文章
localhost:5000在MacOS V12(蒙特利)中不可用
查看>>
logstash mysql 准实时同步到 elasticsearch
查看>>
Luogu2973:[USACO10HOL]赶小猪
查看>>
mabatis 中出现&lt; 以及&gt; 代表什么意思?
查看>>
Mac book pro打开docker出现The data couldn’t be read because it is missing
查看>>
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
查看>>
mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
查看>>
Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
查看>>
MangoDB4.0版本的安装与配置
查看>>
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MariaDB的简单使用
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>