vue 父组件给子组件传值子组件给父组件传值的实例代码


Posted in Javascript onApril 15, 2019

父组件如何给子组件传值

使用props

举个例子:

子组件:fromTest.vue,父组件 app.vue

fromTest.vue

<template>
<h2>{{title}}</h2> //title必须是父组件传递的
</template>
<script>
  export default (){

    props:["title"]  //可以是数组,也可以是对象
    //如何对title进行校验
    //props:{
    // type:String,required:true //如果父组件不传值就会报错
    //}
  }
</script>

父组件 app.vue

<template>
<from-test title = "你好 "></from-test>   //1.指定值
//<from-test :title = "titleVar "></from-test>   //2.动态传值 titleVar 是变量
</template>
<script>
 export default (){
   data(){

     titleVar :'你好'  //动态传值就代表数据这里需要定义titleVar
  }
  }
</script>

子组件如何给父组件传值

事件,$emit

子组件

button.vue

<template>
  <button @click='handClick'></button>
</template>
<script>
  export default(){
  methods(){
   handClick(){
     this.$emit(lalala,{message:"heihei"}) //lalala是函数名称,后面是想要传递的值

   }
  }
 }
</script>

父组件

app.vue

<template>
  <k-button @lalala = handClick></k-button>
</template>
<script>
import KButton form './components/KButton'  //自己要记得导入组件,引用组件名称
  export default(){ 
   components(){
      KButton
   }
   methods(){
     handClick(obj){
       console.log(obj)  //点击button,控制台就收到值了
     }
    }

 }
</script>

总结

以上所述是小编给大家介绍的vue 父组件给子组件传值子组件给父组件传值的实例代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
javascript实现列表切换效果
May 02 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
Vuex的actions属性的具体使用
Apr 14 #Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 #Javascript
vue自定义指令之面板拖拽的实现
Apr 14 #Javascript
详解Vue组件之间通信的七种方式
Apr 14 #Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 #Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 #Javascript
详解如何理解vue的key属性
Apr 14 #Javascript
You might like
php代码优化及php相关问题总结
2006/10/09 PHP
smtp邮件发送一例
2006/10/09 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
javascript multibox 全选
2009/03/22 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
python中xrange和range的区别
2014/05/13 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
python入门之基础语法学习笔记
2020/02/08 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
大学生职业生涯规划范文
2013/12/31 职场文书
2014年财务部工作总结
2014/11/11 职场文书
代理词怎么写
2015/05/25 职场文书
听课评课活动心得体会
2016/01/15 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
Python 数据可视化之Bokeh详解
2021/11/02 Python
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis