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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
JS实现的省份级联实例代码
2013/06/24 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
Python简明入门教程
2015/08/04 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Python:slice与indices的用法
2019/11/25 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
华为慧通笔试题
2016/04/22 面试题
北大自主招生自荐信
2013/10/19 职场文书
宿舍违规检讨书
2014/01/12 职场文书
运动会班级口号
2014/06/09 职场文书
英文导游词
2015/02/13 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL