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 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
javascript json 新手入门文档
Dec 03 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
实现高性能javascript的注意事项
May 27 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
Html5生成验证码的示例代码
May 10 Javascript
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
基于mysql的bbs设计(四)
2006/10/09 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
解析Python中的异常处理
2015/04/28 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
python框架django基础指南
2016/09/08 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
python协程之动态添加任务的方法
2019/02/19 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Django URL参数Template反向解析
2020/11/24 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
销售顾问的岗位职责
2013/11/13 职场文书
董事长助理岗位职责
2014/02/18 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书