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模块化和命名空间管理的问题说明
Dec 06 Javascript
js日期时间补零的小例子
Mar 05 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 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
mysql时区问题
2008/03/26 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
js传递数组参数到后台controller的方法
2018/03/29 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
Vue调用后端java接口的实例代码
2019/10/28 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
python 日期排序的实例代码
2019/07/11 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
Java文件和目录(IO)操作
2014/08/26 面试题
精彩的演讲稿开头
2014/05/08 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
岗位职责说明书模板
2014/07/30 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
诚信承诺书
2015/01/19 职场文书
个人维稳承诺书
2015/05/04 职场文书