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 相关文章推荐
jQuery 使用手册(一)
Sep 23 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
公众号SVG动画交互实战代码
May 31 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
原生JavaScript实现简单五子棋游戏
Jun 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
Protoss热键控制
2020/03/14 星际争霸
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
理解PHP中的stdClass类
2014/04/18 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
javascript date格式化示例
2013/09/25 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Unicode和Python的中文处理
2017/03/19 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
深入了解Python在HDA中的应用
2019/09/05 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
Python用户自定义异常的实现
2020/12/25 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
什么时候需要进行强制类型转换
2016/09/03 面试题
法定代表人授权委托书范本
2014/10/07 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android