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 操作Word和Excel的实现代码
Oct 26 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
node使用request请求的方法
Dec 20 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 Javascript
JS 基本概念详细介绍
Oct 16 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下实现农历日历的代码
2007/03/07 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
Python urlopen()函数 示例分享
2014/06/12 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
寄语十八大感言
2014/02/07 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
美术教师个人总结
2015/02/06 职场文书
初三毕业感言
2015/07/31 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js
OpenFeign实现远程调用
2022/08/14 Java/Android