vue实现组件之间传值功能示例


Posted in Javascript onJuly 13, 2018

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jquery根据name属性查找的小例子
Nov 21 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 #Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 #Javascript
JS实现select选中option触发事件操作示例
Jul 13 #Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 #Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 #Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 #Javascript
You might like
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
PHP防盗链代码实例
2014/08/27 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
php无限级分类实现方法分析
2016/10/19 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
python opencv实现运动检测
2018/07/10 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
python中round函数如何使用
2020/06/19 Python
python实现图像外边界跟踪操作
2020/07/13 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
物理课外活动总结
2014/08/27 职场文书
环卫处个人工作总结
2015/03/04 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
Node实现搜索框进行模糊查询
2021/06/28 Javascript
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis