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代码
Mar 01 Javascript
Js sort排序使用方法
Oct 17 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
JavaScript网页定位详解
Jan 13 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
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
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
SVG实现时钟效果
2018/07/17 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python探索之自定义实现线程池
2017/10/27 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
python配置grpc环境
2019/01/01 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
python中reload重载实例用法
2020/12/15 Python
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
学生发电厂实习自我鉴定
2013/09/22 职场文书
爱心活动计划书
2014/04/26 职场文书
会计求职信
2014/05/29 职场文书
维修工先进事迹
2014/05/29 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
合作合同协议书范本
2015/01/27 职场文书
小学数学教师研修日志
2015/11/13 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers