Vue三种常用传值示例(父传子、子传父、非父子)


Posted in Javascript onJuly 24, 2018

1、父组件向子组件进行传值:

父组件:

<template>
  <div>
  父组件:
  <input type="text" v-model="name">
  <br>
  <br>
  <!-- 引入子组件 -->
  <child :inputName="name"></child>
  </div>
 </template>
 <script>
  import child from './child'
  export default {
  components: {
   child
  },
  data () {
   return {
   name: ''
   }
  }
  }
 </script>

子组件:

<template>
  <div>
  子组件:
  <span>{{inputName}}</span>
  </div>
 </template>
 <script>
  export default {
  // 接受父组件的值
  props: {
   inputName: String,
   required: true
  }
  }
 </script>

2.子组件向父组件传值

子组件:

<template>
   <div>
   子组件:
   <span>{{childValue}}</span>
   <!-- 定义一个子组件传值的方法 -->
   <input type="button" value="点击触发" @click="childClick">
   </div>
  </template>
  <script>
   export default {
   data () {
    return {
    childValue: '我是子组件的数据'
    }
   },
   methods: {
    childClick () {
    // childByValue是在父组件on监听的方法
    // 第二个参数this.childValue是需要传的值
    this.$emit('childByValue', this.childValue)
    }
   }
   }
  </script>

父组件:

<template>
 <div>
 父组件:
 <span>{{name}}</span>
 <br>
 <br>
 <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
 <child v-on:childByValue="childByValue"></child>
 </div>
</template>
<script>
 import child from './child'
 export default {
 components: {
  child
 },
 data () {
  return {
  name: ''
  }
 },
 methods: {
  childByValue: function (childValue) {
  // childValue就是子组件传过来的值
  this.name = childValue
  }
 }
 }
</script>

3.非父子组件进行传值。(非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。)

公共bus.js

//bus.js
import Vue from 'vue'
export default new Vue()

组件A:

<template>
 <div>
 A组件:
 <span>{{elementValue}}</span>
 <input type="button" value="点击触发" @click="elementByValue">
 </div>
</template>
<script>
 // 引入公共的bug,来做为中间传达的工具
 import Bus from './bus.js'
 export default {
 data () {
  return {
  elementValue: 4
  }
 },
 methods: {
  elementByValue: function () {
  Bus.$emit('val', this.elementValue)
  }
 }
 }
</script>

组件B:

<template>
  <div>
  B组件:
  <input type="button" value="点击触发" @click="getData">
  <span>{{name}}</span>
  </div>
 </template>
 <script>
  import Bus from './bus.js'
  export default {
  data () {
   return {
   name: 0
   }
  },
  mounted: function () {
   var vm = this
   // 用$on事件来接收参数
   Bus.$on('val', (data) => {
   console.log(data)
   vm.name = data
   })
  },
  methods: {
   getData: function () {
   this.name++
   }
  }
  }
 </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的eval JSON object问题
Nov 15 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
利用python分析access日志的方法
Oct 26 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
微信小程序实现横向增长表格的方法
Jul 24 #Javascript
vue中使用sessionStorage记住密码功能
Jul 24 #Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 #Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 #Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 #Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 #Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 #Javascript
You might like
php比较两个字符串长度的方法
2015/07/13 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
详解vuex的简单使用
2018/03/12 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
Python探索之URL Dispatcher实例详解
2017/10/28 Python
python的socket编程入门
2018/01/29 Python
Python3 replace()函数使用方法
2018/03/19 Python
python实现kmp算法的实例代码
2019/04/03 Python
Django获取应用下的所有models的例子
2019/08/30 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
2014年服务员工作总结
2014/11/18 职场文书
美术教师求职信范文
2015/03/20 职场文书
2015年工会工作总结
2015/03/30 职场文书
教师节座谈会主持词
2015/07/03 职场文书
新娘婚礼致辞
2015/07/27 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书