vue 中几种传值方法(3种)


Posted in Javascript onNovember 12, 2019

前言

vue项目中,组件跟组件之间数据的传递是很普遍的行为,在这里总结几种常见的vue组件跟组件之间传值方式,其中,主要有父子组件,非父子组件传值。

父组件向子组件传值

方法:父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上,在子组件添加参数props接收即可。具体可参考官方文档。

父组件传递参数代码如下:

<template>
<center-template :form='userinfo'></center-template>
</template>
<script>
import CenterTemplate from '../../components/admin/userCenterTemplate'
export default {
 components: {
  'center-template': CenterTemplate
 },
 data () {
  return {
   userinfo: {name: 'jack'}
  }
 }, 
}
</script>

上面代码,通过在子组件上面绑定动态参数:form='userinfo'将父组件中的参数传递给子组件,子组件就可以通过props来进行接收。

子组件接收参数代码如下:

...
export default {
  props: {
  // 接收
    form: { userinfo: Object }
    }
  },
}

// 另一种写法
export default {
  props: {
  // 接收
    form: ['userinfo']
    }
  },
}

上面代码中,还可以使用数组来接受参数,但是不能指定参数的类型。

子组件向父组件传值

方法:子组件通过vue实例方法$emit进行触发并且可以携带参数,父组件监听使用@(v-on)进行监听,然后进行方法处理。

子组件向上传值

<template>
  <ul class="letter_city">
    <li @click="selectItem('子组件向父组件传值')">
    </li>
   </ul>
</template>
<script>
export default {
   methods: {
    selectItem(value) {
      this.$emit('selectItems', value)
    }
  }
}
</script>

上面代码中,this指代的是vue实例,子组件通过$emit向父组件触发事件和传递参数。

父组件监听子组件传来的值

<template>
  <city-pages @selectItem='selectItem'></city-pages>
</template>
<script>
import cityPages from './cityPages'
export default {
  components: {
    cityPages
  },
  methods: {
    selectItem(value) {
      console.log(value) // 子组件向父组件传值
    }
  }
}
</script>

上面代码中,在子组件中监听方法,如果子组件触发方法,父子间这边就可以得到子组件传过来的参数了。

非父子组件传值一

Event BUS总线方法:通过新建一个vue实例,来实现$on接收和$emit 来触发事件

1、新建bus.js文件:

// common/bus.js

import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue();

export default bus;

2、组件1(接收通知信息)

import bus from '@/common/bus.js'

export default{
  data(){
    return {
        collapseData: ''   
    }
  },
  created() {
    // 监听collapse,有变动就会收到通知,并改变collapseData值
    bus.$on('collapse', msg => {
      this.collapseData = msg
    })
  }
}

3、组件2(发布信息)

import bus from '@/common/bus.js'

export default {
  methods: {
    sendData(){
      // 发布信号,触发这个函数,其他的接收函数都会收到相应的信息
      bus.$emit('collapse', '信息')
    }
  }
}

非父子组件传值二

借组vux插件实现组件之间的传值。

1、通过npm加载vuex,创建store.js文件,然后在main.js中引入,store.js文件代码如下:

import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex);
 const state = {
  message:'Hello World'
 };
 const mutations = {
  newMessage(state,msg){
   state.message = msg
  }
 }
 export default new Vuex.Store({
  state,
  mutations
 })

3、在组件中存vuex的值,一般如下:

state里面的值只能通过Action来提交来修改和赋值。

<template>
 <div>
 <input type="text" @blur=saveName(username) v-model="username">
 </div>
</template>
 
<script type="text/javascript">
 // 引入mapActions,很重要
 import { mapActions } from 'vuex'
 export default {
 data() {
 return {
 username:'',
 password: ''
 }
 },
 methods: {
 ...mapActions({
 // 在input 的blur 事件中触发回调,并将输入值作为参数返回到store中
 saveName: 'saveName'
 })
 }
 }
</script>

3、在组件中获取Vuex的值,一般如下:

<template>
  <div id="list">
    {{_name}}
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'List',
  data() { return{} },
  computed: {
    // 1普通写法
    // name() { return this.$store.state.name }
    // 2简洁写法
    //...mapState(['name']) 
    // 3重命名
    ...mapState({_name: "name"})
  }
</script>

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

Javascript 相关文章推荐
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 #Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 #Javascript
vue.js 实现a标签href里添加参数
Nov 12 #Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 #Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 #Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 #Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 #Javascript
You might like
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
python 使用get_argument获取url query参数
2017/04/28 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
python如何查看微信消息撤回
2018/11/27 Python
Django框架封装外部函数示例
2019/05/28 Python
利用python生成照片墙的示例代码
2020/04/09 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Python turtle库的画笔控制说明
2020/06/28 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
MYSQL支持事务吗
2013/08/09 面试题
校园新闻广播稿5篇
2014/10/10 职场文书
先进教师个人总结
2015/02/11 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python