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 相关文章推荐
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
微信小程序仿微信运动步数排行(交互)
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
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
上海期货面试题
2014/01/31 面试题
办公室前台岗位职责范本
2013/12/10 职场文书
大学生村官典型材料
2014/01/12 职场文书
策划创业计划书
2014/02/06 职场文书
村长贪污检举信
2014/04/04 职场文书
班主任个人工作反思
2014/04/28 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
Python何绘制带有背景色块的折线图
2022/04/23 Python