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 相关文章推荐
往光标所在位置插入值的js代码
Sep 22 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 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日历
2015/11/17 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
redux-saga 初识和使用
2018/03/10 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python实现身份证号码解析
2015/09/01 Python
详解Python编程中time模块的使用
2015/11/20 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python中p-value的实现方式
2019/12/16 Python
python类中super() 的使用解析
2019/12/19 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
python super函数使用方法详解
2020/02/14 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
刑事代理授权委托书
2014/09/17 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
报名委托书
2015/01/29 职场文书
异地恋情人节寄语
2015/02/28 职场文书