vue实现组件之间传值功能示例
2018-10-12 14:05
1191 查看
本文实例讲述了vue实现组件之间传值功能。分享给大家供大家参考,具体如下:
slot标签:
想向封装好结构的组件中插入内容,需要借助
<slot></slot>
在组件之中进行关联:如
模板中:
<slot name='txt'></slot>
组件调用中:
<p slot='txt'></p>
注:如果只有slot上面每一定义name属性,则只能有一个slot
<div class='box'> <com><p slot='txt'></p> </com> </div> <template id="c"> <div> <slot name="txt"></slot> </div> </template>
Vue.component('com',{ template:"#c" })
父组件向子组件传值:
props
父组件:
<template> <child :parent-msg='a'></child> </template>
子组件:
child:{ template:'#chi' props:['parentMsg'] }
子组件向父组件的传值:
vue只运行数据的单选传递,在子组件向父组件的传值中,需要事件触发
子组件:
<template> <div @click="up"></div> </template>
methods:{ up(){ this.$emit('fn','msg') // 主动触发fn方法,msg是需要传递的数据 } }
父组件:
<div> <child @fn="getval"></child> </div>
methods:{ getval(msg){ // msg接收到的数据 this.msg=msg } }
希望本文所述对大家vue.js程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- vue.js项目 el-input 组件 监听回车键实现搜索功能示例
- java实现的计算器功能示例【基于swing组件】
- vue非父子组件通信(以实现全局“回到顶部”功能为例)
- vue.js使用v-model指令实现的数据双向绑定功能示例
- VUE实现一个分页组件的示例
- vue项目实现记住密码到cookie功能示例(附源码)
- vue项目中实现图片预览的公用组件功能
- Vue中组件之间数据的传递的示例代码
- 一个Vue视频媒体多段裁剪组件的实现示例
- Vue实现内部组件轮播切换效果的示例代码
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- vue复合组件实现注册表单功能
- vue动态绑定组件子父组件多表单验证功能的实现代码
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
- Java Swing组件实现进度监视功能示例
- Vue结合原生js实现自定义组件自动生成示例
- vue loadmore组件上拉加载更多功能示例代码
- Vue.js实现一个漂亮、灵活、可复用的提示组件示例
- vue中实现简单的todolist功能、todolist组件拆分以及todolist的删除功能