Vue组件间数据传递的方式(3种)


Posted in Javascript onJuly 13, 2020

vue中传递数据的方式有哪些

数据流的方式传递数据

通过 props 传递属性

父级给demo2组件绑定一个msg数据

父组件

<template>
 <div class='container'>
 <demo2 :msg="msg" @change="change" />
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 data(){
 return {
  msg:'这是测试数据'
 }
 },
 methods:{
 change(value){
  this.msg = value
 }
 },
 components: {
 demo2
 }
}
</script>

子组件通过定义props来使用msg,$emit触发外部的函数来改变父级传入的值

子组件

<template>
 <div class='container'>
 {{msg}}
 <button @click="change">点一下</button>
 </div>
</template>

<script>
export default {
 props:['msg'],
 methods:{
 change(){
  this.$emit('change','这是新的数据')
 }
 }
}
</script>

通过 $attrs 来收集属性

$attrs 会收集组件上绑定的属性,对应class和style不会处理。如果与props同用,props的优先级要高于attrs

父组件

<template>
 <div class="container">
 <demo2 class="demo" style="color:red" :msg="msg" />
 </div>
</template>

<script>
import demo2 from "./demo2";
export default {
 data() {
 return {
  msg: "这是测试数据"
 };
 },
 components: {
 demo2
 }
};
</script>

子组件中this.$attrs会收集组件上绑定的属性

子组件

<template>
 <div class="container">{{$attrs.msg}} </div>
</template>

<script>
export default {
 // inheritAttrs:true,
 // 会隐藏行间的属性
 // props:['msg'],
 // 这里props的优先级比$attrs要高,如果设置了props,那么msg会在data上,而$attrs中就没有msg
 created(){
 console.log(this.$attrs)
 // 对象中只有msg一个属性
 }
};
</script>

通过$listeners 来收集方法

$listeners 会收集组件上绑定的方法。 可以通过传递实参的方式改变父组件的值

父组件

<template>
 <div class='container'>
 {{msg}}
 <demo2 class="demo" style="color:red" @msgChange="change"/>
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 data () {
 return {
  msg: '这是测试数据'
 }
 },
 methods: {
 change(newvalue){
  this.msg = newvalue;
 }
 },
 components: {
 demo2
 }
}
</script>

子组件中this.$listeners会收集绑定在组件上的方法。通过this.$listeners.XXX()可以直接调用,以此可以来修改父组件data中的值

子组件

<template>
 <div class="container">
 <button @click="change">点一下</button>
 </div>

</template>

<script>
export default {
 // inheritAttrs:true,
 created(){
 console.log(this)
 },
 methods:{
 change(){
  // this.$emit('msgChange')
  // this.$parent.change()
  // 与$emit功能相同,$parent也能够实现该效果

  this.$listeners.msgChange('改变后的值')

 }
 }
};
</script>

通过provide提供依赖,inject注入依赖实现数据跨多级子组件传递

通过给父级的 provide 提供一个依赖对象,让其所用子组件都能访问到这个对象


provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

其实也就是说provide 和 inject 绑定本身不做额外的事情(数据绑定之类),只是将提供的数据暴露给子组件。那么暴露出来的数据是不是可相应的就取决与数据本身

父组件

<template>
 <div class='container'>
 <demo2 class="demo" style="color:red" :msg="msg" @msgChange="change"/>
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 provide(){
 return {
  msg:this.msg,
  msgChange:this.change,
  // 这里this本身就是一个可监听的对象。
  // this也就是当前vue实例本身已完成了数据响应,这里只是将这个实例暴露给了他的所用子组件
  app:this
 }
 },
 data () {
 return {
  msg: '这是测试数据'
 }
 },
 methods: {
 change(){
  this.msg += 1;
 }
 },
 components: {
 demo2
 }
}
</script>

后代的子组件可以通过reject注入相应的依赖

子组件

<template>
 <div class="container">
 <!-- 这个msg的值不会变 -->
 <div>{{msg}} </div>
 <!-- msg的值会变,因为依然指向父组件的vue实例 -->
 <div>{{app.$data.msg}}</div>
 <button @click="msgChange">点一下</button>
 </div>
</template>

<script>
export default {
 inject:['msg','msgChange','app']
};
</script>

直接访问组件实例的方式获取数据

通过 ref 获取组件实例

ref 属性定义在组件上获取的是组件的vue实例,定义在原生标签上获取的是对应的dom

需要等挂载之后才能拿到$refs中的内容

父组件

<template>
 <div class='container'>
 {{msg}}
 <demo2 ref="test"/>
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 data () {
 return {
  msg: ''
 }
 },
 // 需要等挂载之后才能拿到$refs中的内容。
 // 所用不能在模板中使用
 mounted(){
 this.msg = this.$refs.test.msg
 },
 components: {
 demo2
 }
}
</script>

子组件

<script>
export default {
 data(){
 return {
  msg:'这是子组件的数据'
 }
 }
}
</script>

通过\$parent/$children 获取组件实例

同样的也是必须在mounted之后才能获取对应实例

这里是父组件展示子组件中的msg,子组件展示父组件的msg

父组件通过$children获取子组件实例

父组件

<template>
 <div class='container'>
 {{msg}}
 <demo2/>
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 data () {
 return {
  msg: '',
  fatherMsg:"这是父组件的内容"
 }
 },
 mounted(){
 console.log(this.$children)
 //获取子组件实例上的sonMsg,$children是个数组需要选择对应的索引
 this.msg = this.$children[0].sonMsg;
 },
 components: {
 demo2
 }
}
</script>

子组件通过$paren获取父组件实例

子组件

<template>
 <div class='container'>
 {{msg}}
 </div>
</template>

<script>
export default {
 data () {
 return {
  msg:'',
  sonMsg: '这是子组件的数据'
 }
 },
 mounted(){
 //获取父组件的实例上的fatherMsg
 this.msg = this.$parent.fatherMsg;
 }
}
</script>

定义一个公共仓库共享数据

定义 eventBus 共享数据

在Vue原型上添加一个$bus为一个新的vue对象,可以在全局的vue实例中通过$bus获取到这个vue对象,从而获取这个对象上的属性和方法。

在main.js中定义

Vue.prototype.$bus = new Vue({
 data:{
 a:1,
 b:2
 },
 methods:{
 log(){
  console.log(this.a)
 }
 }
})

全局Vue实例都能获取到定义在$bus上的属性和方法

通过 Vuex 共享数据

官方给出的跨多组件传递数据的解决方案。

store index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
 test:'123123123',
 test2:'123123123',
 },
 mutations: {
 changeTest(state,payload){
  console.log(state,payload)
  state.test = payload.value
 },
 changeTest2(state,payload){
  console.log(state,payload)
  state.test2 = payload.value
 }
 },
 actions: {
 asyncChageTest({commit},payload){
  setTimeout( ()=>{
  commit('changeTest2',payload)
  },2000)
 }
 },
 modules: {
 }
})

在组件中使用

<template>
 <div class='container'>
 {{this.$store.state.test}}
 {{test}}
 {{this.$store.state.test2}}
 {{test2}}
 <button @click="change">点一下</button>
 <button @click="asyncChange">点一下</button>
 </div>
</template>

<script>
// 引入mapState辅助函数改造state数据
import { mapState,mapMutations,mapActions } from 'vuex'
export default {
 data(){
 return {
  msg:'这是测试数据'
 }
 },
 computed:{
 ...mapState(['test','test2'])
 }, 
 methods:{
 // 放异步或者同步的方法引入
 ...mapMutations(['changeTest']),
 ...mapActions(['asyncChageTest']),
 change(){
  // 同步修改state值的两种方法
  this.$store.commit('changeTest',{value:'改变后test的值'});
  // this.changeTest({value:'改变后的值'})
 },
 asyncChange(){
  // 异步修改state值的两种方法
  this.$store.dispatch('asyncChageTest',{value:'改变后test2的值'})
  // this.asyncChageTest({value:'改变后test2的值'})
 }
 },
}
</script>

以上就是对Vue中组件间数据传递的方式进行了一个总结,在日常的开发中还是需要根据使用的场景采取合适的方式进行数据的传递

到此这篇关于Vue组件间数据传递的方式(3种)的文章就介绍到这了,更多相关Vue组件间数据传递内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
用javascript获取textarea中的光标位置
May 06 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 #Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 #Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 #Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 #Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 #Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 #Javascript
浅析JavaScript 函数防抖和节流
Jul 13 #Javascript
You might like
PHP设计模式之观察者模式实例
2016/02/22 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
js验证上传图片的方法
2015/05/12 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python中模块的__all__属性详解
2017/10/26 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
前台接待员岗位职责
2014/01/02 职场文书
初中生自我评价
2014/02/01 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
医院标语大全
2014/06/23 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
安全生产先进个人总结
2015/02/15 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
化工厂员工工作总结
2015/10/15 职场文书
导游词之桂林山水
2019/09/20 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript